本文将介绍 LESS 产生的背景、优势、演化与 CSS 之间的转化，及其典型的应用场景，并将其与其他样式表语言进行比较。相信前端">开发工程师会喜欢 LESS，灵活运用 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. 带参数（及参数缺省值）的混入
.border-radius (@radius: 3px) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } .button { .border-radius(6px); } .button2 { .border-radius(); }
清单 2. 混入生成的 CSS 代码
.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来替换。现在，我们更近一步，不仅仅通过参数值来更改最终结果，而是通过传入不同的参数个数来匹配不同的混入。