Less学习笔记
LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性。
LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。
编译方法：
1、浏览器编译
下载LESSCSS的.js文件，下载地址
在页面引入：
1 <link rel="stylesheet/less" href="example.less" /> 2 <script src="lesscss-1.4.0.min.js"></script>
（LESS文件要在LESS脚本之前引用）
官网上说浏览器端是使用ajax拉取的.less文件，因此要将网站放在服务器端打开，而不能直接在本机打开。
2、GUI编译工具
我使用的是koala，一款国人开发的LESSCSS/SASS编译工具。下载地址：http://koala-app.com/index-zh.html
将less文件编译为对应的.css文件，并由页面引入。
3、Node.js编译
1 npm install -g less 2 lessc xxx.less xxx.css
LESS 拥有四大特性：变量、混合、嵌套、函数。另外，LESS 还拥有一些很有趣的特性有助于我们的开发，例如模式匹配、条件表达式、命名空间和作用域，以及 JavaScript 赋值等等。
变量：
1 @padding-none: 0; 2 .page { 3 padding: @padding-none; 4 }
编译后结果：
1 .page { 2 padding: 0; 3 }
变量可以进行运算：
1 @the-border: 1px; 2 @base-color: #111; 3 #header { 4 background: (@base-color * 13); 5 border-left: @the-border; 6 border-right: (@the-border * 2); 7 }
编译后：
1 #header { 2 background: #dddddd; 3 border-left: 1px; 4 border-right: 2px; 5 }
变量也可以进行插值：
1 @theURL: "./images"; 2 .test2 { 3 background: url("@{theURL}/bg2.jpg"); 4 }
编译后：
1 .test2 { 2 background: url("images/bg2.jpg"); 3 }
变量是“按需加载”（lazy loaded）的，因此不必强制在使用之前声明。见下例：
1 .page { 2 width: @width-page ; 3 @width-page: 400px; 4 margin: 0 auto; 5 }
编译结果：
1 .page { 2 width: 400px; 3 margin: 0 auto; 4 }
混合（Mixins）：
在Less中我们可以定义一些通用的属性，然后在其他属性中使用这些通用属性。
例如：
1 .page { 2 width: 400px ; 3 margin: 0 auto; 4 padding: 0; 5 background: #dddddd; 6 } 7 #header { 8 .page; 9 }
编译后：
1 #header { 2 width: 400px; 3 margin: 0 auto; 4 padding: 0; 5 background: #dddddd; 6 }
带参数混合，在混合的使用中，我们可以像定义函数一样定义一个可以传入参数的通用属性：
1 .border-radius (@radius) { 2 border-radius: @radius; 3 -moz-border-radius: @radius; 4 -webkit-border-radius: @radius; 5 } 6 .test { 7 .border-radius (50px); 8 }
编译后：
1 .test { 2 border-radius: 50px; 3 -moz-border-radius: 50px; 4 -webkit-border-radius: 50px; 5 }
另外可以给出参数的默认值：
1 .border-radius (@radius: 25px) { 2 border-radius: @radius; 3 -moz-border-radius: @radius; 4 -webkit-border-radius: @radius; 5 } 6 .test2 { 7 .border-radius (); 8 }
编译后：
1 .test { 2 border-radius: 25px; 3 -moz-border-radius: 25px; 4 -webkit-border-radius: 25px; 5 }
如果不希望将通用的属性类暴露，在定义的通用属性的时候加上括号：
1 .page () { 2 width: 400px ; 3 margin: 0 auto; 4 padding: 0; 5 background: #dddddd; 6 }
如果参数很多，可以用arguments的方法一次调用：
1 .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #888) { 2 box-shadow: @arguments; 3 -moz-box-shadow: @arguments; 4 -webkit-box-shadow: @arguments; 5 } 6 .test2 { 7 .box-shadow(2px, 5px); 8 }
编译结果：
1 .test2 { 2 box-shadow: 2px 5px 1px #888888; 3 -moz-box-shadow: 2px 5px 1px #888888; 4 -webkit-box-shadow: 2px 5px 1px #888888; 5 }
如果不想限制参数的数量，可以在括号内填...，表示N个参数
1 .margin (...) { 2 margin: @arguments; 3 } 4 .test { 5 .margin(10px 20px); 6 }
编译结果：
1 .test { 2 margin: 10px 20px; 3 }
LESS 提供了通过参数值控制 mixin 行为的功能：
1 .radius (big, @radius) { 2 border-radius: ( @radius + 10 ); 3 -moz-border-radius: ( @radius + 10 ); 4 -webkit-border-radius: ( @radius + 10 ); 5 } 6 .radius (small, @radius) { 7 border-radius: ( @radius - 10 ); 8 -moz-border-radius: ( @radius - 10 ); 9 -webkit-border-radius: ( @radius - 10 ); 10 } 11 12 .test3 { 13 @switch: small; 14 .radius(@switch, 20px); 15 } 16 .test3 { 17 @switch: big; 18 .radius(@switch, 20px); 19 }
编译结果：
1 .test3 { 2 border-radius: 10px; 3 -moz-border-radius: 10px; 4 -webkit-border-radius: 10px; 5 } 6 .test4 { 7 border-radius: 30px; 8 -moz-border-radius: 30px; 9 -webkit-border-radius: 30px; 10 }
且参数是有域的：
1 @switch: big; 2 .test3 { 3 @switch: small; 4 .radius(@switch, 20px); 5 } 6 .test4 { 7 .radius(@switch, 20px); 8 }
编译结果依然是：
1 .test3 { 2 border-radius: 10px; 3 -moz-border-radius: 10px; 4 -webkit-border-radius: 10px; 5 } 6 .test4 { 7 border-radius: 30px; 8 -moz-border-radius: 30px; 9 -webkit-border-radius: 30px; 10 }
Guards：
Guards 被用来匹配表达式 (expressions)
1 .test-guards (@height) when (@height >=100px){ 2 background: red; 3 } 4 .test-guards (@height) when (@height <100px){ 5 background: green; 6 } 7 .test-guards (@height) { 8 height: @height; 9 } 10 11 .test5 { 12 .test-guards(110px;); 13 } 14 .test6 { 15 .test-guards(90px;); 16 }
编译后：
1 .test5 { 2 background: red; 3 height: 110px; 4 } 5 .test6 { 6 background: green; 7 height: 90px; 8 }
Guards 支持的运算符包括：> >= = =< <。
另外，true关键字是唯一被判断为真的值，也就是这两个混合是相等的：
1 .truth (@a) when (@a) { ... } 2 .truth (@a) when (@a = true) { ... }
而其他不为true的值都会判为假
如 .truth(1) .truth(40) 都不会匹配。
如果需要根据值的类型匹配混合，可以使用 is* 函数：
1 .mixin (@a, @b: 0) when (isnumber(@b)) { ... } 2 .mixin (@a, @b: black) when (iscolor(@b)) { ... }
几个检查基本类型的函数：
- iscolor
- isnumber
- isstring
- iskeyword
- isurl
如果需要检查一个值（数字）使用了哪个单位，可以使用下面三个函数：
- ispixel
- ispercentage
- isem
最后，你可以使用关键词 and 在 guard 中加入额外的条件:
.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
或者，使用关键词 not 否定条件：
1 .mixin (@b) when not (@b > 0) { ... }
嵌套规则：
LESS 可以让我们以嵌套的方式编写层叠样式，如下例：
1 #content { 2 -webkit-box-shadow: 1px 1px 1px #ccc; 3 -moz-box-shadow: 1px 1px 1px #ccc; 4 box-shadow: 1px 1px 1px #ccc; 5 6 .test6{ 7 -webkit-box-shadow: 3px 4px 2px #ccc; 8 -moz-box-shadow: 3px 4px 2px #ccc; 9 box-shadow: 3px 4px 2px #ccc; 10 } 11 &:hover{ 12 background: #ddd; 13 }; 14 }
编译结果：
1 #content { 2 -webkit-box-shadow: 1px 1px 1px #ccc; 3 -moz-box-shadow: 1px 1px 1px #ccc; 4 box-shadow: 1px 1px 1px #ccc; 5 } 6 #content .test6 { 7 -webkit-box-shadow: 3px 4px 2px #ccc; 8 -moz-box-shadow: 3px 4px 2px #ccc; 9 box-shadow: 3px 4px 2px #ccc; 10 } 11 #content:hover { 12 background: #ccc; 13 }
函数：
LESS提供了多种函数用于控制颜色变化、处理字符串、算术运算等等。这些函数在函数手册中有详细介绍，手册地址
参考资料 LessCss中的语言特性
