Less 是一门CSS预处理语言，它扩充了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
Less的安装
Less可以在浏览器端、桌面客户端以及服务器端使用。Less编译器比较常用的有koala编译器（http://koala-app.com/index-zh.html），如果你习惯用sublime作为前端编辑工具，那么可以通过安装相应的插件来编辑less文档，而不需要额外的编辑器了。由于我平时比较习惯用sublime，这里介绍一下如何使用sublime来编译less文件。
第一步：安装插件
需要安装两个插件
安装less2css插件：
方法：ctrl+shift+p>install Package>输入less2css按Enter安装less插件
方法：ctrl+shift+p>install Package>输入less按Enter
第二步：安装nodejs
可以参照菜鸟教程中的教程安装（http://www.runoob.com/nodejs/nodejs-install-setup.html）
第三步：安装less
cmd命令下分别输入：
- npm install -g less
- npm install less-plugin-clean-css
提示安装好后重启sublime即可。
接下来我们就可以建一个简单的less文件来测试一下，less文件的代码如下：
@charset "UTF-8";
/*注释1*/
//注释2
@height:100px;
div{
height: @height;
width: 200px;
border: 2px solid black;
}按保存后，在同一个文件夹下会生成一个相应的css文件，内容为：
可以发现在编译后的所有代码都在同一行，而且注释都没有了，这里需要改一下：
Preference -> package settings -> less2Css -> settings use里的默认设置值，由于Preference -> package settings -> less2Css -> settings default中的设置可以无法修改，所以把里面的设置复制到settings use中，然后再把”minify”属性改成false：
保存之后再保存一下less文件，相应的css文件就变成了：
可以发现变成了我们平常写的样式了，而且只有通过/**/注释的语句编译后仍然存在，而通过//注释的语句不在了。
Less使用语法
1. 变量
在less中，我们通过@符号来定义变量，如果一个属性值在多个地方被使用，这时就可以将其定义成变量，这样万一要修改的话，只需要将变量值改变即可。例如：
在less中，我们定义了一个height变量，然后在div和p中使用到了
@height:100px;
div{
height: @height;
width: 200px;
border: 2px solid black;
}
p{
height: @height;
}
编译之后，相应的height值就变成了100px：
div {
height: 100px;
width: 200px;
border: 2px solid black;
}
p {
height: 100px;
}
2. 混合
混合类似 JavaScript 中的函数调用，这里分为：基本混合、带参数混合和带默认参数混合。一下less文件中分别描述了其使用方法：
div{
height: 100px;
width: 200px;
.border;
}
//基本混合
.border{
border: 2px solid black;
}
//带参数混合
.border_02(@border_width){
border: @border_width solid black;
}
.border_02_test{
.border_02(10px);
}
//带默认参数混合
.border_03(@border_width:10px,@color:black){
border: @border_width solid @color;
}
.border_03_test1{
.border_03();
}
.border_03_test2{
.border_03(20px,red);
}编译之后的 css 代码为：
div {
height: 100px;
width: 200px;
border: 2px solid black;
}
.border {
border: 2px solid black;
}
.border_02_test {
border: 10px solid black;
}
.border_03_test1 {
border: 10px solid black;
}
.border_03_test2 {
border: 20px solid red;
}这里需要注意的是：带默认参数的混合型调用时，如果不设置参数，则使用默认参数；但是不带默认参数的混合型调用时必须要设置参数，否则会报错。
在使用一些CSS3的属性时，由于要考虑不同浏览器的兼容性，同一个属性需要分别对不同的浏览器编写，此时，使用less中的混合型就可以避免重复编写。以圆角border-radius为例，其中less文件中的代码为：
.radius(@top:5px,@right:5px,@bottom:5px,@left:5px){
-webkit-border-radius: @top @right @bottom @left;
-moz-border-radius: @top @right @bottom @left;
border-radius: @top @right @bottom @left;
}
.radius_test1{
.radius();
}
.radius_test2{
.radius(1px,2px,3px,4px);
}编译之后的css文件变成了：
.radius_test1 {
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
.radius_test2 {
-webkit-border-radius: 1px 2px 3px 4px;
-moz-border-radius: 1px 2px 3px 4px;
border-radius: 1px 2px 3px 4px;
}3. 匹配模式
less 中的匹配模式类似于 JavaScript 中的swith case条件判断， 根据调用时给出的调用条件来匹配相应的样式类。例如我们经常要使用到的三角形，可以现在less文件中写好四个方向的三角形：
.triangle(top,@width:10px,@color:#ccc){
border-width: @width;
border-color:transparent transparent @color transparent;
border-style: dashed dashed solid dashed;
}
.triangle(right,@width:10px,@color:#ccc){
border-width: @width;
border-color:transparent transparent transparent @color;
border-style: dashed dashed dashed solid;
}
.triangle(bottom,@width:10px,@color:#ccc){
border-width: @width;
border-color: @color transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
.triangle(left,@width:10px,@color:#ccc){
border-width: @width;
border-color: transparent @color transparent transparent;
border-style: dashed solid dashed dashed;
}
//不论匹配到哪个模式，始终会调用
.triangle(@_,@width:10px,@color:#ccc){
width: 0;
height: 0;
overflow: hidden;
}然后在 less 文件中就可以调用自己需要的三角形了，例如调用一个向上的三角形：
.sanjiao{
.triangle(top);
}编译之后的CSS文件为：
.sanjiao {
border-width: 10px;
border-color: transparent transparent #ccc transparent;
border-style: dashed dashed solid dashed;
width: 0;
height: 0;
overflow: hidden;
}4. 运算
在 less 中可以像 JavaScript 中一样对属性值进行加减乘除运算，如下：
.average(@x, @y) {
@average: ((@x + @y) / 2);
}
div {
.average(16px, 50px); // 调用混合
padding: @average; // 利用混合模型的返回值
}编译之后的 css 代码为：
div {
padding: 33px;
}5. 嵌套
在 less 中，子元素的选择器可以直接嵌套在父元素选择器中，例如我们常用的 ul ，需要对里面的元素写样式，html结构如下：
<ul class="list">
<li><a href="#">测试文字</a><span>2017-4-4</span></li>
<li><a href="#">测试文字</a><span>2017-4-4</span></li>
<li><a href="#">测试文字</a><span>2017-4-4</span></li>
<li><a href="#">测试文字</a><span>2017-4-4</span></li>
</ul>采用 less 中的嵌套规则对.list中的元素进行样式设置，可以写成：
.list{
width:600px;
margin:30px auto;
padding:0px;
list-style:none;
li{
height:30px;
line-height:30px;
background-color:#B5B4B4;
margin-bottom:5px;
}
a{
float:left;
//&代表上一层选择器
&:hover{ //其实就是a:hover
color:red;
}
}
span{
float:right;
}
}编译后的 css 文件为：
.list {
width: 600px;
margin: 30px auto;
padding: 0px;
list-style: none;
}
.list li {
height: 30px;
line-height: 30px;
background-color: #B5B4B4;
margin-bottom: 5px;
}
.list a {
float: left;
}
.list a:hover {
color: red;
}
.list span {
float: right;
}6. @arguments
@arguments 包含了混合函数中传递进来的所有参数，如果不想单独处理每一个参数的话，就可以用@arguments。
.border_arg(@width:10px, @color: red, @style:solid){
border:@arguments;
}
.test_arg{
.border_arg();
}编译之后的 css 文件为：
.test_arg {
border: 10px red solid;
}
7. 避免编译
有时候，我们需要输出一些less 不认识的专有语法，就需要避免less去编译，例如css3中的calc:
.test{
width: calc(300px-30px);
}编译后的css为：
.test {
width: calc(270px);
}为了避免less编译，我们需要在~，并把不需要编译的部分用双引号""或者单引号''引起来，同样以上面的calc为例，less文件中的写法为:
.test{
width: ~"calc(300px-30px)";
}编译后的CSS 文件为：
.test {
width: calc(300px-30px);
}8. !important
!important 主要用于调试时设置某个样式的级别最高，在调用的混合时，只要后面加上!important 就可以给混合中的所有属性都加上!important ，例如：
.radius(@top:5px,@right:5px,@bottom:5px,@left:5px){
-webkit-border-radius: @top @right @bottom @left;
-moz-border-radius: @top @right @bottom @left;
border-radius: @top @right @bottom @left;
}
.test_important{
.radius() !important;
}编译后的 css 文件为：
.test_important {
-webkit-border-radius: 5px 5px 5px 5px !important;
-moz-border-radius: 5px 5px 5px 5px !important;
border-radius: 5px 5px 5px 5px !important;
}以上是 less 的基本使用方法，如果需要更加深入的学习 less ，可以参考 less 中文网。