LESS 背景介绍LESS 提供了多种方式能平滑的将写好的代码转化成标准 CSS 代码，在很多流行的框架和工具盒中已经能经常看到 LESS 的身影了（例如 Twitter 提供的 bootstrap 库就使用了 LESS）。那么，LESS 是从何而来呢？它和 SASS 等样式表语言又有何区别呢？
图 1.LESS 的官网介绍 根据维基百科上的介绍，其实 LESS 是 Alexis Sellier 受 SASS 的影响创建的开源项目。当时 SASS 采用了缩进作为分隔符来区分代码块，而不是 CSS 中广为使用的括号。为了让 CSS 现有用户使用起来更为方便，Alexis 开发了 LESS 并提供了类似的功能。在一开始，LESS 的解释器也同样是由 Ruby 编写，后来才转而采用了 JavaScript. LESS 代码既可以运行在客户端，也可以运行在服务器端。在客户端只要把 LESS 代码和相应的 JavaScript 解释器在同一页面引用即可；而在服务器端，LESS 可以运行在 Node.js 上，也可以运行在 Rhino 这样的 JavaScript 引擎上。
说一点题外话，其实现在的 SASS 已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和 CSS 一样采用了大括弧作为风格符。后一种语法规则又名 SCSS，在 SASS 3 之后的版本都支持这种语法规则。SCSS 和 LESS 已经越来越像了，它俩之间更详细的对比可以参考 。
LESS 高级特性我们知道 LESS 拥有四大特性：变量、混入、嵌套、函数。这些特性在其他文章中已经有所介绍，这里就不复述了。其实，LESS 还拥有一些很有趣的特性有助于我们的开发，例如模式匹配、条件表达式、命名空间和作用域，以及 JavaScript 赋值等等。让我们来逐一看看这些特性吧。
模式匹配：相信大家对 LESS 四大特性中的混入 (mixin) 依然印象深刻吧，您用它能够定义一堆属性，然后轻松的在多个样式集中重用。甚至在定义混入时加入参数使得这些属性根据调用的参数不同而生成不同的属性。那么，让我们更进一步，来了解一下 LESS 对混入的更高级支持：模式匹配和条件表达式。
首先，让我们来回顾一下普通的带参数的混入方式：
清单 1. 带参数（及参数缺省值）的混入1
2
3
4
5
6
7
8
9
10
11
| .border-radius (@radius: 3px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
.button {
.border-radius(6px);
}
.button2 {
.border-radius();
}
|
清单 2. 混入生成的 CSS 代码1
2
3
4
5
6
7
8
9
10
| .button {
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
.button2 {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
|
从上面这个例子可以看出，在混入我们可以定义参数，同时也可以为这个参数指定一个缺省值。这样我们在调用这个混入时如果指定了参数 .border-radius(6px)，LESS 就会用 6px来替换，如果不指定参数来调用 .border-radius()，LESS 就会用缺省的 3px来替换。现在，我们更近一步，不仅仅通过参数值来更改最终结果，而是通过传入不同的参数个数来匹配不同的混入。
清单 3. 利用不同的参数个数来匹配不同的混入1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .mixin (@a) {
color: @a;
width: 10px;
}
.mixin (@a, @b) {
color: fade(@a, @b);
}
.header{
.mixin(red);
}
.footer{
.mixin(blue, 50%);
}
|
清单 4. 不同参数个数调用后生成的 CSS 代码1
2
3
4
5
6
7
| .header {
color: #ff0000;
width: 10px;
}
.footer {
color: rgba(0, 0, 255, 0.5);
}
|
这个例子有些像 Java 语言中的方法调用有些类似，LESS 可以根据调用参数的个数来选择正确的混入来带入。现在，我们了解到通过传入参数的值，以及传入不同的参数个数能够选择不同的混入及改变它的最终代码。这两个例子的模式匹配都是非常容易理解的，让我们换个思路，上面的例子中参数都是由变量构成的，其实在 LESS 中定义参数是可以用常量的！模式匹配时匹配的方式也会发生相应的变化，让我们看个实例。
清单 5. 用常量参数来控制混入的模式匹配1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| .mixin (dark, @color) {
color: darken(@color, 10%);
}
.mixin (light, @color) {
color: lighten(@color, 10%);
}
.mixin (@zzz, @color) {
display: block;
weight: @zzz;
}
.header{
.mixin(dark, red);
}
.footer{
.mixin(light, blue);
}
.body{
.mixin(none, blue);
}
|
清单 6. 常量参数生成的 CSS 代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
| .header {
color: #cc0000;
display: block;
weight: dark;
}
.footer {
color: #3333ff;
display: block;
weight: light;
}
.body {
display: block;
weight: none;
}
|
通过这个例子我们可以看出，当我们定义的是变量参数时，因为 LESS 中对变量并没有类型的概念，所以它只会根据参数的个数来选择相应的混入来替换。而定义常量参数就不同了，这时候不仅参数的个数要对应的上，而且常量参数的值和调用时的值也要一样才会匹配的上。值得注意的是我们在 body 中的调用，它调用时指定的第一个参数 none 并不能匹配上前两个混入，而第三个混入 .mixin (@zzz, @color)就不同了，由于它的两个参数都是变量，所以它接受任何值，因此它对三个调用都能匹配成功，因此我们在最终的 CSS 代码中看到每次调用的结果中都包含了第三个混入的属性。
最后，我们把清单 1 中的代码做略微改动，增加一个无参的混入和一个常量参数的混入，您猜猜看最终的匹配结果会发生什么变化么？
清单 7. 无参和常量参数的模式匹配1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| .border-radius (@radius: 3px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
.border-radius (7px) {
border-radius: 7px;
-moz-border-radius: 7px;
}
.border-radius () {
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.button {
.border-radius(6px);
}
.button2 {
.border-radius(7px);
}
.button3{
.border-radius();
}
|
下面的结果可能会出乎您的意料，无参的混入是能够匹配任何调用，而常量参数非常严格，必须保证参数的值 （7px）和调用的值 （7px）一致才会匹配。
清单 8. 加入了无参混入后生成的 CSS 代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| .button {
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.button2 {
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.button3 {
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
|
|
