CSS预处理技术（一）Less

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{

    filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"; //css中会是 filter: ms:alwaysHasItsOwnSyntax.For.Stuff();

}

下面提供一个Less中文文档供大家参考

http://www.bootcss.com/p/lesscss/