Less作为 CSS 的一种扩展，不仅完全兼容 CSS 语法，而且连新增的特性也是使用 CSS 语法，你可以在任何时候回退到 CSS的写法。 大家可以通过以下两个地址，快速的学习Less。

• Less文档：http://less.bootcss.com/features/
• Less在线编译工具：http://tool.oschina.net/less

变量

只能定义一次，其本质就是“常量”。

• 变量的定义：

@nice-blue: #5B83AD; @light-blue: @nice-blue + #111; @div-width: 13px;

• 变量的使用与编译：

#header { color: @light-blue; width: @div-width; }

编译为：

#header { color: #6c94be; width: 13px; }

混合（Mixin）

• 混合允许将一个属性集合整块替换到另一个属性集合中。如：

.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; }
我们可以将这个css属性集合，mixin到另一个css属性集中，如：
#menu a { color: #111; .bordered;//或者写为.bordered() } .post a { color: red; .bordered;//或者写为.bordered() }

经过编译后：

#menu a { color: #111; border-top: dotted 1px black;//替换后 border-bottom: solid 2px black;//替换后 } .post a { color: red; border-top: dotted 1px black;//替换后 border-bottom: solid 2px black;//替换后 }

• 使mixin变量不作为css输出
  只需要添加一对圆括号就可以了，这是该mixin将不被输出在编译后的css文件中，如：

.my-mixin { color: black; } .my-other-mixin() { background: white; } .class { .my-mixin; .my-other-mixin; }

编译后：

.my-mixin { color: black; } // 这里不编译输出.my-other-mixin .class { color: black; background: white; }

• 在mixin中使用选择器selector
  除了处理属性外，mixin还可以使用css选择器，如：

.my-hover-mixin() { &:hover { border: 1px solid red; } } button { .my-hover-mixin(); }

编译后：

button:hover {// 定义的伪类选择器hover被应用 border: 1px solid red; }

• 命名空间
  想如果你想混合属性在一个更复杂的选择器,可以叠放多个id或类。如下：

  #outer {
    .inner {
      color: red;
    }
  }
  .c {
    #outer > .inner;
  }
  

那么，#outer和.c就作为一个命名空间了。对于#outer来说，.inner就作为它的一个属性值，访问的时候可以使用#outer.inner来访问，以下这几种写法是等价的：
// all do the same thing
#outer > .inner;
#outer > .inner();
#outer.inner;
#outer.inner();
举例：
#my-library {
.my-mixin() {
color: black;
}
}
// which can be used like this
.class {
#my-library > .my-mixin();
}
编译为：
.class { color: black; }

• 关键字!important
  在使用混合属性后面加上!important关键字，则混合中的所有属性都会加上关键字!important。例如：

.foo (@bg: #f5f5f5, @color: #900) { background: @bg; color: @color; } .unimportant { .foo(1); } .important { .foo(2) !important; }

编译后：

.unimportant { background: #f5f5f5; color: #900; } .important { background: #f5f5f5 !important; color: #900 !important; }

带参数的Mixin

• mixin可以通过括号传递参数，也可以带默认参数：

.border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }

编译后

带默认参数：

.border-radius(@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }
`#header {
.border-radius;//与上图的效果差不错，默认为5px

}`

• mixin多参数：
  mixin允许带多个参数，也有类似于Java中函数重载的特性：

.mixin(@color) { color-1: @color; } .mixin(@color; @padding:2) { color-2: @color; padding-2: @padding; } .mixin(@color; @padding; @margin: 2) { color-3: @color; padding-3: @padding; margin: @margin @margin @margin @margin; } .some .selector div { .mixin(#008000); }

编译后：

.some .selector div { color-1: #008000; color-2: #008000; padding-2: 2; }

当我们定义相同混合属性名，参数不同，然后.mixin(#008000);调用，第一和第二混合都能匹配，但是第三个缺少参数@padding的值，所以不会引用第三个混合属性。

• 指定参数名传值

`.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);

}
.class2 {
.mixin(#efca44; @padding: 40px);
}`

编译后：

.class1 { color: #33acfe; margin: 20px; padding: 20px; } .class2 { color: #efca44; margin: 10px; padding: 40px; }

关键字@arguments

@arguments有特殊的含义，类似于JavaScript中的arguments，他包含了传递给混合属性的所有参数，如下：

.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) { -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; box-shadow: @arguments; } .big-block { .box-shadow(2px; 5px); }

编译后：

.big-block { -webkit-box-shadow: 2px 5px 1px #000; -moz-box-shadow: 2px 5px 1px #000; box-shadow: 2px 5px 1px #000; }

关键字@reset

类似于ES6中的剩余参数...，如下：

.mixin(...) { // matches 0-N arguments .mixin() { // matches exactly 0 arguments .mixin(@a: 1) { // matches 0-1 arguments .mixin(@a: 1; ...) { // matches 0-N arguments .mixin(@a; ...) { // matches 1-N arguments
.mixin(@a; @rest...) { // @rest is bound to arguments after @a // @arguments is bound to all arguments }

• 模式匹配
  有时候，你想让你的mixin可以处理不同的情况，有点类似于switch语句，如下：

.mixin(dark; @color) { color: darken(@color, 10%); } .mixin(light; @color) { color: lighten(@color, 10%); } .mixin(@_; @color) {//通配，这样所有的情况都能拥有display:block这个属性设置 display: block; } //使用该模式匹配 @switch: light; .class { .mixin(@switch; #888); }

编译后：

.class { color: #a2a2a2; display: block; }

作为函数使用的Mixin

当我们把混合当做函数使用时，在调用函数之后，函数中的变量是可以使用的，除非调用混合属性的元素自己也定义了同样的变量。比如：

.mixin() { @width: 100%; @height: 200px; } .caller { .mixin(); width: @width; height: @height; }

编译后：

.caller { width: 100%; height: 200px; }

作为表达式使用

.average(@x, @y) { @average: ((@x + @y) / 2); } div { .average(16px, 50px); // "call" the mixin padding: @average; // use its "return" value }

编译后：

`div {

padding: 33px;
}`

import指令

具体可以参看文档：http://less.bootcss.com/features/#import-directives-feature

Mixin Gurads

带条件的mixin，使用关键字when来定义不同的条件。具体可以参看文档：http://less.bootcss.com/features/#mixin-guards-feature

CSS Guards

同理，css也可以使用guards，它标志在选择器之后，也是使用关键字when，如下：

.my-optional-style() when (@my-option = true) { button { color: white; } } .my-optional-style(); //也可以直接在css样式上写guards button when (@my-option = true) { color: white; }

更多可以参看http://less.bootcss.com/features/#css-guards-feature

循环

在 Less 中，mixin 可以被自己调用。当这种递归形式的 mixin 与 Guard Expressions 和 Pattern Matching 一起联合使用的话，就可以创造出各种迭代/循环结构。如下就是一个用于生成 CSS 栅格类的递归循环的实例：

.generate-columns(4); .generate-columns(@n, @i: 1) when (@i =< @n) { .column-@{i} { width: (@i * 100% / @n); } .generate-columns(@n, (@i + 1)); }

编译后：

.column-1 { width: 25%; } .column-2 { width: 50%; } .column-3 { width: 75%; } .column-4 { width: 100%; }

合并

merge 特性能够聚合多个属性从而形成一个用逗号分隔的单一属性。merge 对于像 background 和 transform 这类属性非常有用。为了避免意外的合并，merge 需要在每个需要合并的属性名后面添加一个 + 以作标示。

.mixin() { box-shadow+: inset 0 0 10px #555; } .myclass { .mixin(); box-shadow+: 0 0 20px black; }

合并后：

.myclass { box-shadow: inset 0 0 10px #555, 0 0 20px black; }

父选择符

&用于指代父选择器以及当前规则的别名，如下：

`a {
color: blue;

&:hover {
color: green;
}
}
//规则的别名
.button {
&-ok {
background-image: url("ok.png");
}
&-cancel {
background-image: url("cancel.png");
}
&-custom {
background-image: url("custom.png");
}
}`

编译后：

a { color: blue; } a:hover { color: green; } //规则的别名，这里代表button .button-ok { background-image: url("ok.png"); } .button-cancel { background-image: url("cancel.png"); } .button-custom { background-image: url("custom.png"); }

• Multiple &
  &可以出现多次，比如：

.link { & + & { color: red; } & & { color: green; } && { color: blue; } &, &ish { color: cyan; } }

编译后：

.link + .link { color: red; } .link .link { color: green; } .link.link { color: blue; } .link, .linkish { color: cyan; }

更多关于&的请参考文档：http://less.bootcss.com/features/#features-overview-feature-nested-rules

内置函数

关于Less的内置函数，可以参看文档http://less.bootcss.com/functions/#functions-overview