写在开头的话：
月余前被问起会不会Less，当时就有想学这个css框架的念头，而在昨天，在前端乱炖上看到一篇LessCss的开篇介绍，忽然就有了一股立马去学的冲动，回到家后找了几篇文章看了下，初感觉比较容易入门，变量混合参数的写法都很容易让人接受。至于嵌套，目前而言，我个人并不喜欢这种写法。追梦说谷歌正在用c++写他们自己的Sass(据说类似Less的一种css框架)，更加让我坚定了学这个框架的想法。今天只看了文档的小半部分，明天空的话就继续喽。希望以后能在项目中用到吧，不过目前我们公司的话，希望不大，哈哈。
一、变量
定义
1 @color:#e11921;
使用
a:hover{ color:@color; }
编译后的结果：
1 a:hover { color: #e11921;}
注意点：
（1）变量的定义无需提前，也就是说，定义可以放在使用之后。比如：
1 a:hover{ 2 color:@color; 3 } 4 @color:#e11921;
编译后的结果：
1 a:hover { 2 color: #e11921; 3 }
（2）变量的作用域
1 @bg:#cccccc; 2 .wrap{ 3 @bg:#e5e5e5; 4 .box{ 5 background-color:@bg; 6 } 7 } 8 .module{ 9 background-color:@bg 10 }
编译后的结果为：
1 .wrap .box { 2 background-color: #e5e5e5; 3 } 4 .module { 5 background-color: #cccccc; 6 }
二、混合
我们可以定义一些通用的属性集.class,然后在其他的地方引入这些属性集
1 .btn{ 2 display:inline-block; 3 border:1px solid #e5e5e5; 4 text-align:center; 5 } 6 7 .btn-b{ 8 width:62px; 9 height:22px; 10 line-height:22px; 11 .btn; 12 }
编译后的结果为：
1 .btn { 2 display: inline-block; 3 border: 1px solid #e5e5e5; 4 text-align: center; 5 } 6 .btn-b { 7 width: 62px; 8 height: 22px; 9 line-height: 22px; 10 display: inline-block; 11 border: 1px solid #e5e5e5; 12 text-align: center; 13 }
注意点：变量也会被混合，带入到新的作用域。（暂）
三、带参数的混合
（我觉得这个功能很适合用于css3，比如渐变啊什么的，浏览器私有前缀是繁琐的存在= =还有就是一组类似的样式了，比如不同尺寸的相似按钮）
继续拿.btn作例子：
1 .btn(@64px,@height:22px){ 2 display:inline-block; 3 width:@width; 4 height:@height; 5 line-height:@height; 6 text-align:center; 7 background-color:#f4f4f4; 8 color:#333; 9 border:1px solid #ccc; 10 border-radius:5px; 11 } 12 13 #submit{ 14 .btn(80px,28px); 15 }
编译后的结果为：
1 #submit { 2 display: inline-block; 3 width: 80px; 4 height: 28px; 5 line-height: 28px; 6 text-align: center; 7 background-color: #f4f4f4; 8 color: #333; 9 border: 1px solid #ccc; 10 border-radius: 5px; 11 }
如果不想把.btn暴露到css中去，只在Less的混合中使用，可以不要设定参数（这里是我疑惑的地方，上个例子中编译的结果也并没有暴露.btn啊）：如
1 .btn(){ 2 display:inline-block; 3 width:64px; 4 height:20px; 5 line-height:32px; 6 text-align:center; 7 background-color:#f4f4f4; 8 color:#333; 9 border:1px solid #ccc; 10 border-radius:5px; 11 } 12 #cancel{ 13 .btn; 14 }
编译后的结果为：
1 #cancel { 2 display: inline-block; 3 width: 64px; 4 height: 20px; 5 line-height: 32px; 6 text-align: center; 7 background-color: #f4f4f4; 8 color: #333; 9 border: 1px solid #ccc; 10 border-radius: 5px; 11 }
注意点：
（1）多参数的混合，参数之间除使用逗号分隔外，还可以使用分号（官方推荐），因为分号有双重含义：它既可以表示混合的参数，也可以表示一个参数中一组值的分隔符。当参数分隔符中逗号和分号都存在时，则分号作为分隔符。
（2）同名不同参数的混合，看下面这个例子：
1 .mixin(@color) { 2 color-1: @color; 3 } 4 .mixin(@color; @padding:2) { 5 color-2: @color; 6 padding-2: @padding; 7 } 8 .mixin(@color; @padding; @margin: 2) { 9 color-3: @color; 10 padding-3: @padding; 11 margin: @margin @margin @margin @margin; 12 }
第一个mixin强制要求第一个参数
第二个mixin强制要求第一个参数，第二个参数为可选
第三个mixin强制要求前2个参数，第三个为可选
因此当调用时：
1 .some .selector div { 2 .mixin(#008000); 3 }
编辑结果为：
1 .some .selector div { 2 color-1: #008000; 3 color-2: #008000; 4 padding-2: 2; 5 }
四 @arguments变量
@arguments包含了你传进去的所有变量，所以它会适合用在一些符合的属性，比如border margin padding box-shadow等等。
我们拿border作为例子（因为写的最多）
1 .border(@1px;@style:solid;@color:#e11921){ 2 border:@arguments; 3 } 4 #border{ 5 .border(2px,dashed,#f00); 6 }
编译结果为：
#border { border: 2px dashed #ff0000; }
好吧，我发现这个例子有点鸡肋，还是换成box-shadow吧
1 .box-shadow(@x:1;@y:1;@blur:2;@color:#eee){ 2 box-shadow:@arguments; 3 -webkit-box-shadow:@arguments; 4 -moz-box-shadow:@arguments; 5 -ms-box-shaow:@arguments; 6 } 7 #box{ 8 .box-shadow(2px;2px;4px;rgba(0,0,0,0.6)); 9 }
编译结果为：
1 #box { 2 box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); 3 -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); 4 -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); 5 -ms-box-shaow: 2px 2px 4px rgba(0, 0, 0, 0.6); 6 }
五：参数高级用法：
1 .mixin (...) { // 接受 0-N 个参数 （...我猜测是任意个数的意思） 2 .mixin () { // 不接受任何参数 3 .mixin (@a: 1) { // 接受 0-1 个参数 4 .mixin (@a: 1, ...) { // 接受 0-N 个参数 5 .mixin (@a, ...) { // 接受 1-N 个参数（参数a没有默认值，表示强制要求这个参数） 6 7 .mixin (@a, @rest...) { 8 // @rest 表示 @a 之后的参数 9 // @arguments 表示所有参数 10 }
六：！important
1 .box{ 2 width:100px; 3 height:100px; 4 } 5 #facebox{ 6 .box !important; 7 background-color:#edd; 8 }
编译后的结果为：
1 .box { 2 width: 100px; 3 height: 100px; 4 } 5 #facebox { 6 width: 100px !important; 7 height: 100px !important; 8 background-color: #edd; 9 }