简介
Less 是一个Css 预编译器，意思指的是它可以扩展Css语言。
它的功能如允许变量(variables)，混合(mixins)，函数(functions) 和许多其他的技术，让Css更具维护性，主题性，扩展性。
Less 可运行在 Node 环境、浏览器环境和Rhino环境，同时也有3种可选工具供你编译文件和监视任何改变。
安装请至底部查看
本文参考了 w3cschool-less
使用-语言特性
-
Mixins （混合函数）
Mixin是一组CSS属性，混合类似于编程语言中的函数，允许将一个类的属性用于另一个类，可以使用类或id选择器与CSS添加样式的方式来声明一个Mixin，它可以储存多个属性，并且可以在代码中复用。
ex：声明一个Mixin，.sbox { color: #992e2e; }-
使用()不输出Mixins：定义的时候加上括号，在使用时生成后的文件中即不显示
.sbox() { color: #992e2e; } - 内部层级选择器：在Mixin内部可以使用选择器
.sbox { &:hover { color: #f00; } } -
命名空间妙用：命名空间用于在通用名称下对mixin进行分组。 使用命名空间可以避免名称冲突，并从外部封装mixin组。
.sbox { .pic { xx } } .bbox { .pic { xx } } - !important：对所有继承的属性加上!important，
.bbox { .sbox !important; } - 多个混合函数合并：如果有多个同名的混合函数在同层级下，他们会合并不会覆盖！
- 代表所有参数的@arguments：绑定所有参数（代表了括号里所有内容），
.sbox( @fz, @lh, @fm ) { font: @fz / @lh @fm; } .box { .sbox( 12px,20px,"Arial" ); } - 代表部分参数的@rest ：绑定部分参数，
.sbox( @a, @rest... ) { box-shadow: @a @rest; } .box { .sbox ( 1px, 0px, #000 );}，别忘了加... - 在多个同名的混合函数中选定想要的那个（和if判断神似）：
.tbox(one) { font-size: 12px; } .tbox(two) { font-size: 14px; } .ckbox { .tbox(two); } - 变量与函数混用：将变量以返回值的形式输出，
.box() { @bgcolor #000; }，可能在一些场合有用吧，大概。。使用时注意变量的特性 - 混合函数是可以任意嵌套的
-
使用()不输出Mixins：定义的时候加上括号，在使用时生成后的文件中即不显示
-
变量
LESS允许使用 @ 符号定义变量。 变量分配使用冒号(:)完成。
LESS中声明变量的格式为“@变量名：变量值”。- 最常用的就是定义和引用
- 选择器：编译时构建的。变量名称必须放在用@符号前缀的花括号（{}）内：
@select: h2; @{select} { color: #992e2e; } -> h2 { color: #992e2e; } - url：
@link: "http://xxx.com; .boxs { background: ("@link/pic.jpg"); } " - import：
@link: "http://xxx.com; @import "@link/box.less"; - 由值组成：
@col: "#992e2e"; @color: "col"; .sbox { color: @@color; } - 延迟加载：延迟加载中，即使它们尚未声明，也可以使用变量（先使用，后声明）。
.sbox { color: @color; } @color: "#992e2e";
操作
加减乘除可以对数字、颜色、变量任意操作，
font-size: 24px/2*2+2-2;导入
@import 可用于导入LESS或CSS文件的内容，默认是less，所以less文件可以不写后缀，比如@import "less/box"，需加分号结尾，下同
@import ( reference ) 用于导入内容，但会将成品样式排除在外（感觉很实用），注意括号内部最好加空格进行分隔，下同
@import ( inline ) 将内容复制到输出css文件中，不进行处理，注意使用此参数时需加后缀
@import ( optional ) 导入可选的文件，加了此参数后就算该文件不存在也不会报错
@import ( once ) 在该文件中只导入一次，在该文件中执行第一次以后，还有导入的话，一概忽略
@import ( less ) 不管后缀定义为什么，都把导入文件以less文件处理
@import (css) 不管后缀定义为什么，都把导入文件以css文件处理
@import (multiple) 可导入多次父选择器
- &代表父级元素，它的用法很多
- 直接用 & ，代表父级
- 和选择器一起用，& + & ，&:hover ，&:first-child
- 字符串拼接，&_lf ， 纯粹的字符串拼接
- 与产生列表中选择器的所有可能性排列，会用逗号分隔
div,p { & + & { font-size: 12px; } } //生成 - > div + div, div + p, p + div, p + p { font-size: 12px; }
注释
// 编译后消失
/**/ 编译后保留规则集
规则集相当于定制作用域
@rule: {
//可以包含很多东西，比如变量，函数等
};
调用：
@fonts: {
font-size: 12px;
.sbox() { color: #992e2e; }
};
//使用时注意: 定义结尾花括号外要加分号，使用时要加括号分号，如果要引用混合函数还需另外定义引用
.box { @fonts(); .sbox; }
- 扩展
Extend是一个Less伪类，它通过使用:extend 选择器在一个选择器中扩展其他选择器的样式
.sbox {
color: #992e2e;
font-size: 12px;
}
.bbox:extend(.sbox) {
line-height: 24px;
}
#生成
.sbox,
.bbox {
color: #992e2e;
font-size: 12px;
}
.bbox {
line-height: 24px;
}
- Mixin Guards
用于匹配简单的值或参数数量，可以使用Guards，他与mixin声明相关联，Guard必须括在括号里，效果类似于 if 效果
- 比较运算符： = > < >= <=
.minx1 ( @fz ) when ( @fz = 12 ) { font-size: 12px; } .minx2 ( @fz ) when ( @fz > 12 ) { font-size: 13px; } .minx3 ( @fz ) when ( @fz < 12 ) { font-size: 11px; } .boxs { .minx1(12); .minx2(14); .minx3(10); } //结果 .boxs { font-size: 12px; font-size: 13px; font-size: 11px; } - 逻辑运算符，使用 and 和 not
.minx4 ( @fz ) when ( @fz > 11 ) and ( @fz < 15 ) and not ( @fz = 13 ) { font-size: @fz/1px; } .boxs2 { .minx4(12); .minx4(13); } //结果 .boxs2 { font-size: 12px; } - 类型检查函数 （返回值为 ture / false）
常见的有：iscolor、isnumber、isstring、iskeyword、isurl
ex:.minx5 ( @color ) when ( iscolor(@color) ) { color: @color; }
iskeyword不知道是啥，isurl在使用的时候有url才为true:isurl(url(...));
- loops循环，允许多次执行一个语句或一组语句
.minx ( @num ) when ( @num > 2 ) {
.minx( @num - 1 );
font-size: @num * 12px;
}
.box {
.minx(7);
}
//结果
.box {
font-size: 36px;
font-size: 48px;
font-size: 60px;
font-size: 72px;
font-size: 84px;
}
- 合并
- 用逗号合并相同的属性，语法是在属性名后分号前加上加号：
.box { box-shadow+: 1px 1px #fff; box-shadow+: 0px 2px #000; }结果是：.box { box-shadow: 1px 1px #fff, 0px 2px #000; } - 用空格合并相同的属性，语法是在属性名后分号前加上加号和下划线，
.box { font+_: 12px; font+_: "Microsoft YaHei"; }结果是：.box { font: 12px "Microsoft YaHei"; }
