来源：申毅&邵华@IBM DevelopWorks

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. 带参数（及参数缺省值）的混入

清单 2. 混入生成的 CSS 代码

从上面这个例子可以看出，在混入我们可以定义参数，同时也可以为这个参数指定一个缺省值。这样我们在调用这个混入时如果指定了参数 .border-radius(6px)，LESS 就会用 6px来替换，如果不指定参数来调用 .border-radius()，LESS 就会用缺省的 3px来替换。现在，我们更近一步，不仅仅通过参数值来更改最终结果，而是通过传入不同的参数个数来匹配不同的混入。

清单 3. 利用不同的参数个数来匹配不同的混入

清单 4. 不同参数个数调用后生成的 CSS 代码

这个例子有些像 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; r;">图 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%); }