Less入门

Less是一门CSS预处理语言，它功能强大，包括：变量 / 嵌套 / 混合（调用样式）/ 函数（可以带参数） / 匹配 / 运算 / 伪类 / @arguments等；

Less的编译工具：koala  下载地址：http://koala-app.com/index-zh.html

Less有两种注释：

(1).  /**/

　　第一种注释会被编译到css文件里。

(2).  // 

　　第二种注释不会被编译到css文件里。只有在Less文件里可以看到。

一：变量

　　@变量名：变量的值；    

二：混合

　　混合就是可以在写样式的大括号里写定义好的类名。

.border{
   border:1px solid red;  
}
p{
   .border;      /*  这样p标签就有了一个红色的边框   */  
}

三：混合可带参数

　　同Javascript的函数一样可以在大括号与类名之间加一个小括号添加参数

.border(@color){
   border:1px solid @color;    
}
p{
   .border(red);    /* 给.border类传入red参数，那么这个p标签就有一个红边框了 */  
}

四：混合--参数默认带值

.border(@color:red){  /* 注意值的后面不要加分号不然报错 */
    border:1px solid @color;
}    
p{
   .border(yellow);   /* p标签拥有了一个黄边框 如果不传值那么p标签就会有一个默认的红色边框*/
}　

五：匹配

　　类名后面小括号里的参数一样（匹配上了，执行大括号里的样式）

　　类名后面小括号里的参数不一样（没有匹配上，不执行大括号里的样式）

　　@_    可以写一个共同的样式，这个符号代表不管有没有匹配上都执行里面的样式；

.box(a,@color:red){
  border:1px solid @color;
}
.box(b,@color:yellow){
  border:1px solid @color;
}
.box(@_,@color:black){
  border:1px solid @color;
}
.border{
  width:200px;
  height:200px;
  .box(a);   /* 最终.border会有一个黑色的边框，因为虽然匹配到了第一个样式，但是下面的样式把第一个样式给覆盖了，如果把最后一个.box跟第一个.box换一下位置那么得到的就是一个红色的边框 
如果想得到一个黄色的边框则可以传入参数b来匹配第二个.box  */
}

六：运算

　　运算很简单，同Javascript代码里的一样，包括 + - *  /  ()   同时颜色值也可以参加运算

七：嵌套

　　父级样式里可以再写此父级子元素的样式，不用写后代选择器

.border{
  width:200px;
  height:200px;
  
  p{
    border:1px solid red;/* 表示.border 的后代元素p 有一个红色边框 */
  }
}

八：伪类

　　伪类可以用 & 来写，&代表的是自身的上一级元素

/* 表示.border hover的时候边框像素以及颜色发生改变 */
.border{
   border:1px solid red;

   &:hover{
        border:2px solid black;  
    }

}

九：@arguments

　　@arguments代表所有的参数

.border(@W:1px,@S:solid,@C:red){
  border:@arguments;   /* 代表所有的参数 */
}