CSS预处理技术总结（一）Less

css预处理技术已经发展的比较成熟了，通过css预处理技术可以很好的提升css的编程性，提高css代码的开发效率和可维护性，目前比较热门的相关技术有Sass、Less CSS、Stylus、Compass等，最近也陆续在项目中用到了这些技术，所以就来个总结吧，本文为系列文章第二篇，主要讨论Less。

相比Sass而言,Less要简单易上手一些，但是编程性较Sass而言，略有不足，所以也有人说它更适合设计师学习，但这并不妨碍它的广泛使用，因为Less本身的语法就已经很够用了，Twitter大名鼎鼎的Bootstrap项目就是基于Less构建而成，以下是前端项目中经常会用到的一些Less语法：

一 注释

less注释一,会被编译到css

/**/　　　　

less注释二,不会被编译到css,建议之后只维护less,所以可多用这种注释

//　　

二 变量

定义变量用 @变量名:变量值; 使用该变量值时用 @变量名

@width: 300px;
body {
  background-color: white;
}

.div1 {
  width: @width;
}

三 混合（mixin）

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。还可以带参数地调用。

比如定义一个样式类.border,直接用到另一个样式类.box里,另一个样式类就很方便的具有了这个类的样式,很好的实现了css代码的复用;
再比如有一个.box2,它和.box有一些属性相同,那就直接继承.box再做特定的修改即可：

.border {
  border: solid 1px black;
}

.box {
  .border; //注意这里！
}

.box2 {
  .box; //还有这里！
  margin: 20px;
}　　

混合（mixin）:可带参数,以实现传入变量参数来用同一个样式类生成各种不同的样式：

.border2(@border_width) { //定义变量参数
  border: @border_width solid black;
}

.box3 {
  .border2(5px); //参数位置传入变量以控制不同的样式
}

.box4 {
  .border2(10px);
}

混合（mixin）参数可带默认值(多个参数之间使用逗号隔开)

.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的boder画三角
  border-width: @w;
  border-color: transparent transparent @c transparent; 
  border-style: dashed dashed solid dashed;
}

.triangle(bottom,@w,@c) { //朝下的三角
  border-width: @w;
  border-color: @c transparent transparent transparent;
  border-style: solid dashed dashed dashed;
}

.triangle2 {
  .triangle(bottom, 20px, red);
}

.triangle3 {
  .triangle(top, 30px, green)
}

五 运算(对变量进行加减乘除等)

@box_width: 100px;
.box6 {
  width: (@box_width - 10)*2;
}

六 嵌套

可以在一个选择器中直接嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来结构更加清晰：

.list1 {
  width: 600px;
  height: 600px;

  li { //相当于在外边写 .list li{}
    height: 20px;

    a {
      float: left;

      //&代表上一层选择器,所以这样写相当于 .list a:hover{}
      &:hover {
        color: red;
      }
    }
  }
}

七 @arguments

@arguments包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments; //相当于()参数里的值放到了这
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}

.box-shadow(2px, 5px);

八 避免编译

有时候需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.
//要输出这样的值我们可以在字符串前加上一个 ~, 例如:

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

九 Less参考资料

1 完整的Less中文文档：
http://www.bootcss.com/p/lesscss/

---

作者 @浩时代
2016.07.25