less css 语法

作为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）的，因此不必强制在使用之前声明。

下面是一个有效的LESS代码片段：

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

.bordered

class 里面的属性样式都会在

#menu
a

和

.post a

中体现出来：

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

任何 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;
}

radius

的值就会是 5px。

你也可以定义不带参数属性集合，如果你想隐藏这个属性集合，不让它暴露到 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

：

.mixin (@a: 0) {
border: @a;
boxer: @a;
}
.unimportant {
.mixin(1);
}
.important {
.mixin(2) !important;
}

编译成：

.unimportant {
border: 1;
boxer: 1;
}
.important {
border: 2 !important;
boxer: 2 !important;
}

模式匹配与Guard表达式

LESS 提供了通过参数值控制 mixin 行为的功能，让我们先从最简单的例子开始：

.mixin (@s, @color) { ... }

.class {
.mixin(@switch, #888);
}

如果要根据

@switch

的值控制

.mixin

行为，只需按照下面的方法定义

.mixin

：

.mixin (dark, @color) {
color: darken(@color, 10%);
}
.mixin (light, @color) {
color: lighten(@color, 10%);
}
.mixin (@_, @color) {
display: block;
}