提要：
1. 什么是css预处理器？
2. 如何使用Less？
3. Less的特点
4. Less的优缺点
一 什么是css预处理
css 预处理是一种语言为css增加了一些编程的特征，并且无需考虑浏览器的兼容性，你可以在你的css样式中使用变量，简单的逻辑处理，甚至函数。
我的理解这个处理器就是把你的写的这些less，sass，stylus也好，统统转换成浏览器能识别的css样式。
目前比较普通的是这三款预处理架构、分别是
Sass(http://sass-lang.com/)
Less css（http://lesscss.org/）
stylus（http://stylus-lang.com）
Sass文件使用.sass拓展名，Less使用.less拓展名，相应的Stylus使用.styl拓展名。
二 如何使用Less
node环境下运行：npm install less
客户端使用Less的话，直接在项目中引入less.js文件即可。但要在.less 文件前引入。
三 Less 特点
a.使用变量
例如一些通用的颜色值，图片路径等，
使用变量的两个好处：多出利用和方便维护，只需要改变量值就行了。
less中变量名使用@符号开始，在Sass中则是使用$开头，在Stylus中无限制。
@mainColor: #333;
@width: 1024px;
span {
width: @width;
border: 1px solid @mainColor;
}
编译结果：
span {
width:1024px;
border: 1px solid #333;
}
b. 使用嵌套语法
.TopBar {
padding: 14px 0;
border-bottom: 1px solid #eee;
line-height: 28px;
.ddColor {
color :#fff;
a {
text-decoration:none;
&:hover {
border-width: 1px;
}
}
}
}
编译结果：
.TopBar {
padding:14px 0;
border-bottom: 1px solid #eee;
line-height: 28px;
}
.TopBar .ddColor {
color:#fff;
}
.TopBar .ddColor a {
text-decoration: none;
}
.TopBar .ddColor a:hover {
border-width: 1px;
}
这里之后的样式嵌套在.TopBar下，可以省略嵌套前的标签属性类等。
c. 运算符
css都能加减乘除了
@color: #111;
div {
background:@color+#222;
编译结果：
div {
background: #333;
}
d.处理浏览器兼容
这个是我认为最实用的一个功能，避免了做重复的事情。
例如解决浏览器兼容问题，使用border-radius需要加上浏览器前缀，麻烦而且代码冗余。
.border-radius(@values){
-webkit-border-radius: @values;
-moz-border-radius: @values;
border-radius: @values;
}
div {
@border-raduis(10px);
}
编译结果：
div {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
a{@transition(all 0.4s);}
编译结果：
a {
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}
e:Mixins(混入)
有点类似与js定义的全局变量，到处都能直接调用。
例如：定义了一个错误提示，字体变大变红。
.error(@fontsize:20px){
font-size:@fontsize;
color:red;
}
其他地方直接调用@error(10px);即可。
f：less的导入
less中可以导入css文件也可以导入less文件。导入css文件会保持原样，less文件会被编译。并且less的导入不要求放在顶部。
@import"untils";
@import"bootstrap-theme";
这里并没有指定less后缀文件，导入时会默认为less文件，等同于
@import"untils.less";
@import"bootstrap-theme.less";
例如：
span {
@import"bootstrap-theme";
}
那么这里导入的样式将作用于span标签。
甚至还可以针对媒体查询的结果来指定导入less文件
例如
@import"untils.less"screen and (max-width:400px);
编译结果：
@media screen and（max-width:400px）{
untils.css样式........
}
g. less 中使用注释
单行注释使用// 或者css的注释符号，多行注释使用
//Hi, I'm a slient comment.
.class {color:white}
.class{color: white}
大概总结了一下Less的优缺点：
优点：
a. css的语法不够强大，需要重复书写很多重复的选择器.less刚好解决了这一问题。
b. 提供变量和逻辑控制
c. 合理的样式复用机制 减少代码的冗余
d. 提高代码的可维护性
e. mixin混入
缺点：
a. 也需花费一定时间去了解学习使用这个预处理，团队协作的难度加大
b. 个人感觉是css本来就是很简单的东西，less中的有些处理反而让它变得更复杂。
