Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
1、安装：
①安装js解析器node.js;
③使用npm安装less，默认安装目录在用户名\node_modules这里面
$ npm install -g less
2、运行
安装 Less 后，就可以在命令行上调用 Less 编译器了，如下：
$ lessc styles.less
这将输出编译之后的 CSS 代码到 stdout，你可以将输出重定向到一个文件：
$ lessc styles.less > styles.css
若要输出压缩过的 CSS，只需添加 -x 选项。如果希望获得更好的压缩效果，还可以通过 –clean-css 选项启用 Clean CSS 进行压缩。
执行 lessc 且不带任何参数，就会在命令行上输出所有可用选项的列表。
3、在客户端使用
①可以在客户端直接使用
②编译为css后使用；
在客户端直接使用时先引入style.less，再引入less.js；
4、webstorm编译less
打开webstorm→file→settings→Tools→file watching，点击“+”→less文件→Program右侧点击“…”弹出对话框，选择在用户名\node_modules\npm里面的lessc.cmd文件，然后确定。
在less文件夹下会自动编译生成同名的css文件；
曾经配置webstorm的编译环境时总共遇到的问题，一开始在node.js官网下载了最新版本的V6.2的node.js，结果安装less的时候总是报错，换成稳定版本V4.4.4错误就没了，是新版本的node.js对less支持不好吗?反正我是搞不明白，能装上就行；
5、语法
1、less定义变量：
@color:#fff;
#header{
color:@color
}
变量可以用于属性(rule）、属性(rule）部件、属性值、选择器和选择器部件，定义时的形式【@变量名：变量值】，引用时，用于属性值【@变量名】【@{变量名}】两种形式都可以，用于属性、属性部件、选择器、选择器部件、字符串拼接，都必须使用【@{变量名}】的形式；
在下面的代码中，.header-top是选择器，top是选择器部件，font-size是属性，-size是属性部件，14px是属性值；
.header-top{
font-size:14px
}
LESS变量没有先定义后使用的要求；
2、mixin：类和ID都直接对应mixin的样式库
.border(@px;@color){
border:solid @px @color;
font-size:@px*5;
}
.mixin{
.border(5px;@color);
}
显示定义不带参数或者带参数的样式库，不会输出到编译后的CSS文件中；上面代码中的.border的样式就不会在编译后的CSS文件中出现；同样的
@px:@height;
.border(){
border:solid @px @color;
font-size:@px*5;
}
.mixin{
.border();
}
上面代码的.border的样式也不会在编译后的CSS文件中出现，但是如果将（）去掉，.border的样式就会在编译后的CSS文件中出现；
3、使用…令mixin接受数量不定的参数，使用@rest定义入参数组，@arguments定义所有参数；
.boxshadow(@x:0,@y:0,@blur:1px,@color:#fff){
box-shadow:@arguments
}
4、推荐使用；作为mixin参数的分隔符：
.a(x1,x2,x3)//三个参数； a(x1,x2；x3)//两个参数，x1和x2为CSS属性列表；
5、使用命名空间避免重复
#myNameSpace{
.home{
border:1px solid black;
}
.work{
border:5px solid red;
}
}
6、支持嵌套书写
#outer{
border:1px solid black;
#inner{
border:5px solid red;
}
}
7、用&代替元素本身，有&存在时解析同元素，无&出现时解析后代元素
a{
color:red;
&:hover{
color:black
}
}
8、针对数值型的value进行运算，针对颜色有特有函数：
#outer{
background: lighten(@color,10%);
}
extract(@x,3) //用来提取@x参数组中的第三个参数
length（@x） //返回@x参数组的参数个数
ceil(@number) //取最接近的大于@number的整数
floor(@number) //与ceil()相反
round(@x;@y) //取@y位数的@x的近似值
pow(@;@y) //@x的@y次方
convert //转换可转换的单位
unit //去除或增加单位
isnumber //判定类型(isstring,isem,ispixel...)
9、继承extend，两种书写形式都可以，比mixins更简，可以对应所有选择器，mixin仅对应类和ID选择器
.cc:extend(#pv){}
.dd{
&:extend(#pv);
}
使用extend的好处：
①避免添加基础类，即.a和.b部分属性一直，当.b需要覆盖.a部分属性的时候就可以使用extend；
②使用extend可以减少CSS代码量，使用mixin：
使用mixin
.a{
font-size: 11px;
}
.b{
.a
}
编译结果
.a {
font-size: 11px;
}
.b {
font-size: 11px;
}
使用extend
.a{
font-size: 11px;
}
.b{
&:extend(.a);
}
编译结果
.a,
.b {
font-size: 11px;
}
10、编写在@media内部的extend只匹配同一级@media声明内的选择器，向上、向下（嵌套）都不会匹配；编写在@media外的顶级extend则会匹配一切
@media screen{
.x:extend(.b){}//不匹配
.y:extend(.c){}//匹配
@media (min-width:1023px){
.b{
color:red;//不匹配
}
}
.c{
color:yellow//匹配
}
}
.z:extend(.b){}//匹配
11、less的单行注释使用//，无法显示在编译后的CSS中，所以推荐使用多行注释；
12、可以使用gulp等自动化构建工具对less进行自动的编译、対生成的css进行压缩、重命名，详见【2016.12.13 gulp】。
