前端从零单排之LESS（第四期)

LESS 是一门CSS预编译语言，犹记得当初打算使用CSS预编译语言的时候，可选的有SASS、LESS、Stylus三门，恰好那个时候在学习bootstrap，bootstrap项目中样式就是less写的，今后就结下了于LESS的缘分。LESS使用的快一年的时间了。
下面简单的列举一下我最爱的三个LESS的特性：

• 变量
  编译前:

@color: #ccc;
#header {
  color: @color;
}
h2 {
  color: @color;
}

编译后

#header {
  color: #ccc;
}
h2 {
  color: #ccc;
}

• 混合(Mixins)
  编译前

.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}
#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

编译后

#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

• 嵌套
  编译前

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
    font-size: 12px;
    a {
      text-decoration: none;
      &:hover {
        border-width: 1px
      }
    }
  }
}

编译后

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

这三个缘由我想足以让人爱上LESS了。可是这里须要注意的仍然是有些点：

• 变量命名是好事，尤为是对颜色、字体、栅格系统有很是大的帮助，可是使用过程仍是须要谨慎，最好是有张网站用色的色表图片，展列整个网站所用颜色或者是直接作成网页显示。这样方便多人合做。
• 函数更多的用处在于封装一些须要加前缀的属性，或是多个参数的属性，同时命名必定要足够的语义化。
• 嵌套对程序员更友好， 也更好管理， 可是嵌套过深的话这点就成了灾难，会让人看的整我的都斯巴达掉。 适当嵌套，以保持CSS的优雅。
• 有时要考虑兼容性，须要避免编译某条属性，方法即在值的前面加一个~符号,具体以下:

.class {
    filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"
}

• LESS 安装, 同时推荐less在线编译 网站，可以实时看到效果。
• LESS 可以作数值运算，提供一些函数， 可是我怎么都感受那是对设计师友好呢， 是我打开方式错了么？

参考文章：
LESS 中文官网
LESS Getting started