Less 是一门 CSS 预处理语言，使用了类似CSS的语法，为CSS赋予了动态语言的特征。它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展。简单来说：用类似JS的语法去写CSS。
- 变量
图 1
<h1>LESS is more, than css</h1>
如果用css直接写样式：
h1{
color: blue;
font-size: 80px;
}
在这段代码中h1的颜色和字体大小的值是可以变化的，可以类比JS中的变量，将blue的值赋予一个新定义的变量。在less中，定义变量用@加上变量名，将上面代码用less编写：
@color: blue;
@fontSize: 80px;
h1{
color:@color;
font-size: @fontSize;
}
- 嵌套
<div class="box">
<div></div>
<div></div>
</div>
在less中，写样式可以进行嵌套：
@width: 200px;
@height: 100px;
.box{
div{
width: @width;
height: @height;
background-color: @color;
}
}
- 运算
图 2
和js一样，less也可以进行运算
@color: blue;
@subColor: red;
@width: 200px;
@height: 100px;
.box{
div{
width: @width;
height: @height;
background-color: @color;
}
}
.box div:last-child{
width: @width + 100; // 300px
height: @height - 50; // 50px
background-color: @subColor;
}
- 混合（Mixins）
图 3
Mixins类比于js中函数，以 . 加上混合名称开始，
.rotate(@rotate: 60deg){
transform: rotate(@rotate);
}
.box div:last-child{
.rotate(10deg);
}
此处不考虑浏览器兼容性，在调用.rotate时传不传参都可以。
最后传送门：
LESS官网：http://lesscss.org/
LESS中文网 ： http://www.lesscss.cn/
