less是css的预处理语言，作为 CSS 的一种扩展，不仅完全兼容 CSS 语法，而且连新增的特性也是使用 CSS 语法。
编译方式
1.使用koala编译
Koala 是一款由国人开发的开源预处理语言图形编译工具，目前已经支持less，sass，compass，coffeescript，很好用。下载地址 http://koala-app.com/index-zh.html
2.使用nodejs
在Node.js中安装LESS最简单的方式就是使用Node包管理工具npm来安装：
npm install -g less
如果你使用Mac或者Linux，可能需要使用管理员身份安装：
sudo npm install -g less
编译
lessc styles.less
常用方式介绍
1.变量
变量命名以@开头，例如
@myColor: #5B83AD;
#header { color: @myColor; }
编译为：
#header { color: #5B83AD; }
2.混合（mixin）
不带参数的方式，例如
.myColor{color: #666}
#header｛
width:100px;
height：100px;
.myColor()
｝
混合也可以带参数，例如
.myColor(@color){color: @color}
#header｛
width:100px;
height：100px;
.myColor(#346)
｝
混合也可以定义默认参数值，例如
如果调用不传参数的话，#666为默认值
.myColor(@color: #666){color: @color}
#header｛
width:100px;
height：100px;
.myColor()
｝
3.嵌套规则
我们之前经常见到ul li的css样式
ul{list-style:none}
ul li{
height:30px;
}
ul a｛
color：#222；
｝
ul a:hover{
color:#777;
}
用less嵌套的话这样写，很好理解，其中&表示上一层元素，就是a
ul{
list-style:none;
li{
color：#222；
height:30px;
}
a{
color:#222;
&：hover{
color:#777;
}
}
}
4.运算
数字可以加减乘除，例如
@myFont:14px；
#d1{
font-size：8px+@myFont
}
结果为
#d1{
font-size：22px
}
颜色也可以运算，要先转化为10进制。
5.匹配模式
类似于js的条件运算
.test（top，@w:100px）｛
height：@w;
｝
.test（bottom，@w:200px）｛
height：@w;
｝
#header｛
.test(top,120px); //匹配第一个.test
｝
6.@arguments
所有的参数
.my(@w:100px，@s：#222，@xx：solid){
border：@arguments；
}
#header｛.my();｝
7.避免编译
使用 ~'............'
网友评论