Less

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