提要：
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中的有些处理反而让它变得更复杂。