1.Less是一门CSS预处理语言，扩展CSS，增加变量、Mixin、函数等特性。
可运行于Node或浏览器端。
2. 安装：
$npm install -g less
3. 命令行用法：
1）$lessc styles.less
2）将css结果存在一个文件中：$lessc styles.less style.css
3）压缩版：$ lessc --clean-css styles.less styles.min.css
4）代码使用：
通过node调用：
var less = require('less'); less.render('.class { width: (1 + 1) }', function (e, output) { console.log(output.css); }); 输出：.class { width: 2; }
注意：一定保证npm的配置在父级文件夹中存在，否则会报错。
4. 浏览器端用法：
通过link，rel引入styles.less
<link rel="stylesheet/less" type="text/css" href="styles.less" />下载less.js，并通过script引入
<script src="less.js" type="text/javascript"></script> 注意：让stylesheets在script之前
语法：
1.定义一个变量：@border-color:#CCCCCC;
.class{
border:1 px solid @border-color;
}
==>css
.class{
border: 1px solid #CCCCCC;
}
注意：也有生命周期，所以分为全局变量与费全局变量。
Mixins：多重集成的实现。允许将一个类嵌入到另外一个类中使用，被嵌入的类也可以称作变量，简单的讲，Mixins 其实是规则级别的复用。
// 定义一个样式选择器 .roundedCorners(@radius:5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } // 在另外的样式选择器中使用 #header { .roundedCorners; } #footer { .roundedCorners(10px); }Parametric Mixins（混入参数） // 定义一个样式选择器 .borderRadius(@radius){ -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } // 使用已定义的样式选择器 #header { .borderRadius(10px); // 把 10px 作为参数传递给样式选择器 } .btn { .borderRadius(3px);// // 把 3px 作为参数传递给样式选择器 } 运算及函数1. 可以进行加减乘除运算。@transition: @init*2;
代码可参考：https://github.com/YZlingyu/teambition/blob/master/css/index.less
