一:编译方法

1.首先全局安装less包

                                            
cnpm install -g less
                                            
                                        

2.执行如下命令;出现版本号则表示安装成功

                                            
lessc -v  //lessc 3.8.1 (Less Compiler) [JavaScript]  
                                            
                                        

3.直接在less文件所在的目录执行如下命令

                                            
lessc index.less index.css
                                            
                                        

二:代码实例

1.变量格式转换编译

                                            
//index.less
@width: 10px;
@height: @width + 10px;
#header {
  width: @width;
  height: @height;
}   

//编译后 index.css
#header {
  width: 10px;
  height: 20px;
}
                                            
                                        

2.混合模式转换编译，less定义一个类名，其他样式中直接通过类名调用即可；就像调用函数一样

                                            
//index.less
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered();
}

//编译后 index.css
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}