为CSS加点料～LESS（LeanerStyleSheets的缩写）赋予CSS动态的语言特性，如变量、继承、操作、函数等，是一种向后兼容的CSS扩展语言。当前最新版本：Less3.0官方文档：http://lesscss.org快速入门：http://www.bootcss.com/p/lesscss源码地址：https://github.com/less/less.js1.浏览器使用1.1。编译成*.css?node.js?npminstall-gless?lesscstyles.lessstyles.csskoala这是一个简单易用的GUI工具，用于less实时编译、压缩等，见：http://koala-app.com/index-zh.html更多工具请访问官网：http://lesscss.org/tools/#guis-for-lesswebapck（后续待补...)1.2。借助less.js注意：*.less文件必须在导入less.js之前导入。请在web服务环境下使用，双击打开可能会报错。2.语法规则2.1.变量（Variables）//定义变量@bg-color:#fffccc;//使用变量body{background-color:@bg-color;}Output:body{background-color:#fffccc;}这个也是支持的：@尺寸：14px；@content-font-size:'大小';h3{font-size:@@content-font-size;}输出：h3{font-size:14px;}2.2。Blend(Mixins)我们可以预先定义一个通用的属性集（mixin，比如下面的.bordered），然后在另一个需要用到的属性集（比如下面的#menu）中调用（或者引入，合并），这样方法称为混合。基本上使用.bordered{//如果不想让这个mixin编译输出，可以写成.bordered(){...}border-top:dotted1pxblack;border-bottom:solid2pxblack;}#link{display:inline-block;.有边界的；//.bordered();完成相同的功能，不需要括号。}output:.bordered{border-top:dotted1pxblack;border-bottom:solid2pxblack;}#link{display:inline-block;border-top：虚线1px黑色；border-bottom:solid2pxblack;}withParametermix.border-radius(@radius){//参数不要设置默认值，调用时必须传参，否则编译错误border-radius:@半径;-moz-边界半径：@radius；-webkit-border-radius:@radius;}.border-radius2(@radius:5px){//设置参数border-radius的默认值：@radius;-moz-边界半径：@radius；-webkit-border-radius:@radius;}#header{.border-radius(4px);//传递参数4px//.border-radius;//编译错误}#footer{.border-radius2;//正常编译，不传参数时可以省略()}output:#header{border-radius:4px;-moz-边框半径：4px；-webkit-border-radius:4px;}#footer{border-radius:5px;-moz-边框半径：5px；-webkit-border-radius:5px;}@arguments变量@arguments包含了所有传入的参数，如下例所示。box-shadow(@x:0,@y:0,@blur:1px,@color:#000){box-shadow:@arguments;-moz-box-shadow:@arguments;-webkit-box-shadow:@arguments;}.div1{.box-shadow(2px,5px);}输出：.div1{box-shadow:2px5px1px#000000;-moz-box-shadow:2px5px1px#000000;-webkit-box-shadow:2px5px1px#000000;}匹配模式只有匹配的混合才会被使用。变量可以匹配任意传入值，而变量以外的固定值只匹配与其相等的传入值。.mixin(dark,@color){//调用时，第一个参数必须传dark来匹配颜色：darken(@color,10%);}.mixin(light,@color){//调用时，第一个参数必须传light才能匹配color:lighten(@color,10%);}.mixin(@_,@color){//不管第一个参数传什么，都会匹配display:block;}@switch:light;.class{.mixin(@switch,#888);}输出：.class{颜色：#a2a2a2;display:block;}也可以匹配多个参数，即根据调用时传递的参数个数，匹配对应的混合规则（下）。.mixin2(@a){//调用color时传1个参数：@a;}.mixin2(@a,@b){//调用color时传2个参数：@b;}.class2{.mixin2(#888,#eee);}Output:.class2{color:#eeeeee;}向导（Guards）使用关键字when来根据表达式进行匹配和混合（mixin）。为了尽可能的保留CSS的可声明性，Less通过guards（Guards）来实现条件判断，而不是if/else语句，因为前者已经定义在@media查询属性中。以下示例：//when关键字用于定义一系列Guard（在本例中只有一个Guard）.mixin(@a)when(lightness(@a)>=50%){//亮度颜色的当大于或等于50%时，匹配background-color:black;}.mixin(@a)when(lightness(@a)<50%){//matchbackground-color:white;}.mixin当颜色的亮度小于50%时(@a){//无论传递什么，总是匹配color:@a;}.class3{.mixin(#ddd)}.class4{.mixin(#555)}输出：.class3{背景色：黑色；颜色：#dddddd；}.class4{背景色：白色；颜色：#555555;}指南中提供了比较运算符>、>=、=、=<、<。//关键字true只表示booleantruth//下面两种方式是等价的.truth(@a)when(@a){...}.truth(@a)when(@a=true){...}//关键字true以外的值被认为是booleanfalse。类{.truth(40);//这里的参数40被认为是booleanfalse，不会匹配上面定义的mixin(mixin)}引导序列可以使用基于CSS媒体查询的逻辑运算符//使用关键字and来组合引导序列，表示条件关系。mixin(@a)when(isnumber(@a))and(@a>0){...}//用逗号合并前导序列，表示条件或（或）关系。mixin(@a)when(@a>10),(@a<-10){...}//用关键字取反.mixin(@b)whennot(@b>0){...最后，如果我们想根据值的类型进行匹配，我们可以使用is*函数。mixin(@a,@b:0)when(isnumber(@b)){...}.mixin(@a,@b:black)when(iscolor(@b)){...}availableis*functionsiscolorisnumberisstringiskeywordisurlipixel判断一个值的单位是否为pxispercentage判断一个值的单位是否为百分比isem判断一个值的单位是否ofavalueisemisunit(value,unit)判断一个值是否为指定单位类型isruleset2.3。NestingLESS它允许我们以嵌套的方式编写级联样式#header{color:black;.navigation{字体大小：12px；}.logo{宽度：300px；//符号&表示当前选择器的父级//主要用于编写链式选择器，特别适用于伪类，如:hover,:focus&:hover{text-decoration:none}}}输出：#header{color:black;}#header.navigation{font-size:12px;}#header.logo{width:300px;}#header.logo:hover{text-decoration:none;}@rule(At-规则），例如@media或@supports，也可以嵌套。编译后@规则放在最顶层，同一规则集下其他元素的相对顺序不变。下面的例子：.component{width:300px;@media(最小宽度:768px){宽度:600px;@media(min-resolution:192dpi){背景图片:url(/img/retina2x.png);}}@media(最小宽度:1280px){宽度:800px;}}输出：.component{width:300px;}@media(min-width:768px){.component{width:600px;}}@media(min-width:768px)and(min-resolution:192dpi){.component{background-image:url(/img/retina2x.png);}}@media(min-width:1280px){.component{宽度:800px;}}2.4。运算(Operations)任何数字、颜色或变量都可以使用运算符进行加法(+)、减法(-)、乘法(*)或除法(/)。在对数字进行加减比较之前，如果数字中含有单位，则将其换算成相同的单位（例如10mm换算成1cm），以最左边的单位为基准。如果单位不可转换（例如px→cm）或转换无意义，则忽略。@conversion-1:5cm+10mm;//结果：6cm（10mm先换算成1cm再计算）@conversion-2:2-3mm-5cm;//结果：-51mm（5cm先换算成50mm再计算））@incompatible-units:2+5px-3cm;//结果：4px（cm不能转为px，所以忽略单位）@base:5%;@filler:@base*2;//结果：10%@other:@base+@filler;//结果：15%div{颜色：#888/4;//结果：#222222高度：100%/2+@filler；//result:60%}乘除运算数字没有转换，因为在大多数情况下，它没有意义：长度乘以长度得到一个区域，而CSS不支持指定区域。因此，LESS将按原样对数字进行运算（忽略单位），并将最左边的指定单位带入结果。@底座：2cm*3mm；//结果：6cm2.5。函数（Functions）LESS提供了一系列颜色、字符串和数学运算的函数，详见官方文档。这里有一些例子：hue(@color);//获取颜色饱和度的色调(@color);//获取颜色的饱和度lightness(@color);//获取一种颜色的亮度//基于一种颜色创建另一种颜色一种颜色//@new将保持@old的色调，但具有不同的饱和度和亮度@new:hsl(hue(@old),45%,90%);百分比(0.5);//转换为百分比50%2.6.Namespace有时候，为了更好的组织CSS或者单纯为了更好的封装，封装一些变量或者mixins模块，可以在#bundle中定义一些属性集，如下：#bundle{.button(){display:block;边框：1px纯黑色；背景色：灰色；&:hover{background-color:white}}.tab{...}.citation{...}}使用>来引用属性集的以下规则：#headera{color:orange;#bundle>.button;}2.7。作用域（Scope）LESS中的作用域与其他编程语言非常相似，首先会在本地查找变量或者某个mixins模块，如果没有找到，它会在父作用域中查找，直到找到为止。@var:红色；#page{@var:白色；#header{颜色：@var;//小白，先在#header中查找，然后在#page中查找，再到外层}}2.8.Comments//这是less添加的注释，不会被编译/*这是保留的css注释，在编译时保留*/2.9。导入(Importing)*.less文件@import"library";//library.less后缀名字可以带也可以不带@import"typo.css";//直接导入CSS文件，不让LESS处理{name}@base-url:"http://assets.fnord.com";background-image:url("@{base-url}/图像/bg.png");2.11.有时使用~来禁用编译我们需要输出一些不正确的CSS语法或使用一些LESS无法识别的专有语法。这时候我们可以使用~，如下：.class{filter:~"ms:alwaysHasItsOwnSyntax.For.Stuff()";}output:.class{filter:ms:alwaysHasItsOwnSyntax.For.Stuff();}2.12.使用JavaScript表达式你可以通过反引号在LESS中使用JavaScript表达式。@var:`"hello".toUpperCase()+'!'`;//结果：你好！
