CSS预处理技术已经发展的比较成熟，这种技术可以很好的提升css的编程性，提高编程效率和可维护性。目前比较热门的CSS预处理技术有Sass，Less CSS，Stylus，Compass等。在项目中的应用也是越来越多，下面总结一下这部分内容。
相比于Sass，Less上手简单，但是编程性不如Sass。
一、注释
Less注释一，会被编译到css
/**/
Less注释二，不会被编译到css。建议多用这种注释方式来维护Less
//
二、变量
定义变量使用 @变量名：变量值，使用变量 @变量名
@width: 300px;
.div1{
width: @width;
}
三、混合（Mixin）
混合可以将一个定义好的classA直接引入到另一个classB中，从而实现classB继承classA的所有属性，还可以带参数的调用。
比如一个定义好的.border样式类，直接应用到另一个样式类.box里，这样就实现了样式的复用。再比如还有一个.box2它与.box样式类有一些是相同的，那么就可以直接复用.box的样式，再定义一些自己的样式。
.border{
border: solid 1px black;
}
.box{
.border //注意这里引用了.border样式类
}
.box2{
.box //注意这里引用了.box样式类
margin: 20px; //注意这里是.box2独有的样式
}混合（minxin）：可带参数，实现传入不同的参数来生成各种不同的样式。
.border2( @border-width ){
border: @border-width solid black;
}
.box3{
.border2( 5px ); //注意这里传入变量来控制不同的样式
}
.box4{
.border2( 20px ); //另一个样式
}混合（minxin）：参数可以带默认值，多个参数用逗号隔开。
.border3( @border-width2： 5px ){
border: @border-width2 solid black;
}
.box5{
.border3( ); //注意这里应用的是默认值的样式，也可以忽略默认值，改为其他的变量值
}一些常见的兼容性写法就可以利用混合的方式封装起来进行简化
.border-radius( @border-radius: 2px ){
border-radius: @border-radius;
-moz-border-radius: @border-radius;
-webkit-border-radius: @border-radius;
}
四、模式匹配
有些时候需要通过传入的参数来改变混合的默认样式，比如下面的例子：
下面通过Less模式匹配来定义不同样式模式的三角（top模式和bottom模式），但是，无论哪种模式，@_（放在模式参数位置）定义的样式所有模式公式都有。
.triangle( @_, @w, @c ){ //@_模式定义的样式是所有模式都具有的样式
width: 0;
height: 0;
overflow: hidden;
}
.triangle( top, @w, @c ){ //向上的三角，使用CSS的border画三角
border-width: @w;
border-color: transparent transparent @c transparent ；
border-style: dashed dashed solid dashed;
}
.triangle( bottom, @w, @c ){ //向下的三角，使用CSS的border画三角
border-width: @w;
border-color: @c transparent transparent transparent ；
border-style: solid dashed dashed dashed;
}
.triangle2{
.triangle( top, 20px, red );
}
.triangle3{
.triangle( bottom, 10px, green );
}
五、运算（对变量进行加减乘除）
@box_width: 100px;
.box6{
width: ( @box_width + 10 )*10
}六、嵌套
可以在一个选择器中直接嵌套另一个选择器来实现继承，减少代码量，而且代码的结构也更加清晰。
.list1{
width: 600px;
height: 600px;
li{ //相当于在外面写.list li{ }
height: 20px;
a{
float: left;
&: hover{ //&代表上一层选择器 即.list a:hover
color: red;
}
}
}
}七、@arguments
@arguments包含了所有传递进来的参数，这样就可以不用单独处理每一个参数。
.box-shadow( @x: 0, @y: 0, @blur: 1px, @color: #000 ){
box-shadow: @arguments; //相当于括号的参数值全部放在了这里
-moz-box-shadow: @arguments;
-webkitbox-shadow: @arguments;
}
.box-shadow( 2px, 5px );八、避免编译
有时候需要输出一些不正确的CSS语法，或者使用一些Less不认识的专有的语法
要输出这样的字符串，我们可以在字符串前面加上一个~，例如：
.class1{
~"ms:alwaysHasItsOwnSyntax.For.Stuff()"; //css中会是 filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}下面提供一个Less中文文档供大家参考
http://www.bootcss.com/p/lesscss/
