less和mixin

作为CSS的一种扩展，LESSCSS不仅向下兼容CSS的语法，而且连新增的特性也是使用CSS的语法。这样的设计使得学习LESS很轻松，而且你可以在任何时候回退到CSS。

变量

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

输出：

#header { color: #6c94be; }

甚至可以在定义变量值时使用其它的变量：

@fnord: "I am fnord.";
@var: 'fnord';
content: @@var;

解析后：

content: "I am fnord.";

如果对同一个变量定义两次的话，在当前作用域中最后一次定义的将被使用。这与CSS的机制类似，最后一次定义的值会成为这个属性的值。

@var: 0;
.class1 {
    @var: 1;
    .class {
        @var: 2;
        three: @var;
        @var: 3;
    }
    one: @var;
}

会编译成：

.class1 .class {
    three: 3;
}
.class1 {
    one: 1;
}

变量是“按需加载”（lazy loaded）的，因此不必强制在使用之前声明。

lazy-eval {
    width: @var;
}

@var: @a;
@a: 9%;

下面这个片段也是有效的：

.lazy-eval-scope {
    width: @var;
    @a: 9%;
}

@var: @a;
@a: 100%;

编译成：

.lazy-eval-scope {
    width: 9%;
}

混合（Mixins）
在 LESS 中我们可以定义一些通用的属性集为一个 class，然后在另一个 class 中去调用这些属性，下面有这样一个 class：

.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

那如果我们现在需要在其他 class 中引入那些通用的属性集，那么我们只需要在任何 class 中像下面这样调用就可以了：

#menu a {
    color: #111;
    .bordered;
}
.post a {
    color: red;
    .bordered;
}

任何 CSS class, id 属性集都可以以同样的方式引入。
注意：变量也会被混合，也就是说变量会被带到当前的作用域。这个特性还有争议，也许在未来会有变化。

带参数混合
在 LESS 中，你还可以像函数一样定义一个带参数的属性集合：

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

然后在其他 class 中像这样调用它：

#header {
    .border-radius(4px);
}
.button {
    .border-radius(6px);
}

我们还可以像这样给参数设置默认值：

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

所以现在如果我们像这样调用它的话：

#header {
    .border-radius;
}

你也可以定义不带参数属性集合，如果你想隐藏这个属性集合，不让它暴露到 CSS 中去，但是你还想在其他的属性集合中引用，你会发现这个方法非常的好用：

.wrap () {
    text-wrap: wrap;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    word-wrap: break-word;
}

pre { .wrap }

输出：

pre {
    text-wrap: wrap;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    word-wrap: break-word;
}

多参数混合
使用分号或者逗号分隔
2个参数，每个参数都含有通过逗号分隔的一组值的情况：.name(1, 2, 3; something, else)。
3个参数，每个参数只含一个数字的情况：.name(1, 2, 3)。
使用一个象征性的分号可以创建一个只含一个参数，但参数包含一组值的混合：.name(1, 2, 3;)。
逗号分隔的一组值参数的默认值：.name(@param1: red, blue;)。

使用同样的名字和同样数量的参数定义多个混合是合法的。在被调用时，LESS会应用到所有可以应用的混合上。比如你调用混合时只传了一个参数.mixin(green)，那么所有只强制要求一个参数的混合都会被调用：

.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;
}

@arguments 变量
@arguments包含了所有传递进来的参数。 如果你不想单独处理每一个参数的话就可以像这样写：

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

将会输出：

box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
 -webkit-box-shadow: 2px 5px 1px #000;

高级参数用法与 @rest 变量
如果需要在 mixin 中不限制参数的数量，可以在变量名后添加 …，表示这里可以使用 N 个参数。

.mixin (...) {        // 接受 0-N 个参数
.mixin () {           // 不接受任何参数
.mixin (@a: 1) {      // 接受 0-1 个参数
.mixin (@a: 1, ...) { // 接受 0-N 个参数
.mixin (@a, ...) {    // 接受 1-N 个参数

此外：

.mixin (@a, @rest...) {
    // @rest 表示 @a 之后的参数
    // @arguments 表示所有参数
}

!important关键字
调用时在混合后面加上!important关键字表示将混合带来的所有属性标记为!important：

原链接：http://www.1024i.com/demo/less/document.html