本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。 我们可以直接在客户端使用 .less（LESS 源文件），只需要从http://lesscss.org下载 less.js 文件，然后在我们需要引入 LESS 源文件的 HTML 中加入如下代码：

<link rel=stylesheet/less type=text/css href=styles.less>

LESS 源文件的引入方式与标准 CSS 文件引入方式一样：

<link rel=stylesheet/less type=text/css href=styles.less>

需要注意的是：在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS 源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。 LESS 在服务器端的使用主要是借助于 LESS 的编译器，将 LESS 源文件编译生成最终的 CSS 文件，目前常用的方式是利用 node 的包管理器 (npm) 安装 LESS，安装成功后就可以在 node 环境中对 LESS 源文件进行编译。

在项目开发初期，我们无论采用客户端还是服务器端的用法，我们都需要想办法将我们要用到的 CSS 或 LESS 文件引入到我们的 HTML 页面或是桥接文件中，LESS 提供了一个我们很熟悉的功能— Importing。我们可以通过这个关键字引入我们需要的 .less 或 .css 文件。 如：

@import “variables.less”

.less 文件也可以省略后缀名，像这样：

@import “variables”

引入 CSS 同 LESS 文件一样，只是 .css 后缀名不能省略。 LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。

我们可以从下面的代码了解变量的使用及作用：

清单 3 LESS 文件 @border-color : #b5bcc7 .mythemes tableBorder{ border : 1px solid @border-color }

经过编译生成的 CSS 文件如下：

清单 4. CSS 文件 .mythemes tableBorder { border: 1px solid #b5bcc7 }

从上面的代码中我们可以看出，变量是 VALUE（值）级别的复用，可以将相同的值定义成变量统一管理起来。

该特性适用于定义主题，我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义，这样不同的主题只需要定义不同的变量文件就可以了。当然该特性也同样适用于 CSS RESET（重置样式表），在 Web 开发中，我们往往需要屏蔽浏览器默认的样式行为而需要重新定义样式表来覆盖浏览器的默认行为，这里可以使用 LESS 的变量特性，这样就可以在不同的项目间重用样式表，我们仅需要在不同的项目样式表中，根据需求重新给变量赋值即可。

LESS 中的变量和其他编程语言一样，可以实现值的复用，同样它也有生命周期，也就是 Scope（变量范围，开发人员惯称之为作用域），简单的讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释 Scope。

清单 5. LESS 文件 @width : 20px #homeDiv { @width : 30px #centerDiv{ width : @width// 此处应该取最近定义的变量 width 的值 30px} } #leftDiv {width : @width// 此处应该取最上面定义的变量 width 的值 20px }

经过编译生成的 CSS 文件如下：

清单 6. CSS 文件 #homeDiv #centerDiv { width: 30px } #leftDiv { width: 20px } Mixins（混入）功能对用开发者来说并不陌生，很多动态语言都支持 Mixins（混入）特性，它是多重继承的一种实现，在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。

我们先简单看一下 Mixins 在 LESS 中的使用：

清单 7. LESS 文件// 定义一个样式选择器 .roundedCorners(@radius:5px) { -moz-border-radius: @radius -webkit-border-radius: @radius border-radius: @radius } // 在另外的样式选择器中使用 #header { .roundedCorners } #footer { .roundedCorners(10px) }

经过编译生成的 CSS 文件如下：

清单 8. CSS 文件 #header { -moz-border-radius:5px -webkit-border-radius:5px border-radius:5px } #footer { -moz-border-radius:10px -webkit-border-radius:10px border-radius:10px }

从上面的代码我们可以看出：Mixins 其实是一种嵌套，它允许将一个类嵌入到另外一个类中使用，被嵌入的类也可以称作变量，简单的讲，Mixins 其实是规则级别的复用。

Mixins 还有一种形式叫做 Parametric Mixins（混入参数），LESS 也支持这一特性：

清单 9. LESS 文件// 定义一个样式选择器 .borderRadius(@radius){ -moz-border-radius: @radius -webkit-border-radius: @radius border-radius: @radius } // 使用已定义的样式选择器 #header { .borderRadius(10px)// 把 10px 作为参数传递给样式选择器 } .btn { .borderRadius(3px)// // 把 3px 作为参数传递给样式选择器 }

经过编译生成的 CSS 文件如下：

清单 10. CSS 文件 #header { -moz-border-radius: 10px -webkit-border-radius: 10px border-radius: 10px } .btn { -moz-border-radius: 3px -webkit-border-radius: 3px border-radius: 3px }

我们还可以给 Mixins 的参数定义一人默认值，如

清单 11. LESS 文件.borderRadius(@radius:5px){ -moz-border-radius: @radius -webkit-border-radius: @radius border-radius: @radius } .btn { .borderRadius }

经过编译生成的 CSS 文件如下：

清单 12. CSS 文件 .btn { -moz-border-radius: 5px -webkit-border-radius: 5px border-radius: 5px }

像 JavaScript 中arguments一样，Mixins 也有这样一个变量：@arguments。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。

清单 13. LESS 文件 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ -moz-box-shadow: @arguments -webkit-box-shadow: @arguments box-shadow: @arguments } #header { .boxShadow(2px,2px,3px,#f36) }

经过编译生成的 CSS 文件如下：

清单 14. CSS 文件 #header { -moz-box-shadow: 2px 2px 3px #FF36 -webkit-box-shadow: 2px 2px 3px #FF36 box-shadow: 2px 2px 3px #FF36 }

Mixins 是 LESS 中很重要的特性之一，我们这里也写了很多例子，看到这些例子你是否会有这样的疑问：当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？如果你是 java 程序员或 C++ 程序员，我猜你肯定会想到命名空间 Namespaces，LESS 也采用了命名空间的方法来避免重名问题，于是乎 LESS 在 mixins 的基础上扩展了一下，看下面这样一段代码：

清单 15. LESS 文件 #mynamespace { .home {...} .user {...} }

这样我们就定义了一个名为 mynamespace 的命名空间，如果我们要复用 user 这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace >.user。 在我们书写标准 CSS 的时候，遇到多层的元素嵌套这种情况时，我们要么采用从外到内的选择器嵌套定义，要么采用给特定元素加 CLASS 或 ID 的方式。在 LESS 中我们可以这样写：

清单 16. HTML 片段 <div id=home> <div id=top>top</div> <div id=center> <div id=left>left</div> <div id=right>right</div> </div> </div>清单 17. LESS 文件 #home{ color : blue width : 600px height : 500px border:outset #top{ border:outsetwidth : 90% } #center{ border:outsetheight : 300pxwidth : 90%#left{ border:outset float : left width : 40%} #right{ border:outset float : left width : 40%} } }

经过编译生成的 CSS 文件如下：

清单 18. CSS 文件 #home { color: blue width: 600px height: 500px border: outset } #home #top { border: outset width: 90% } #home #center { border: outset height: 300px width: 90% } #home #center #left { border: outset float: left width: 40% } #home #center #right { border: outset float: left width: 40% }

从上面的代码中我们可以看出，LESS 的嵌套规则的写法是 HTML 中的 DOM 结构相对应的，这样使我们的样式表书写更加简洁和更好的可读性。同时，嵌套规则使得对伪元素的操作更为方便。

清单 19. LESS 文件a { color: red text-decoration: none &:hover {// 有 &时解析的是同一个元素或此元素的伪类，没有 &解析是后代元素 color: black text-decoration: underline } }

经过编译生成的 CSS 文件如下：

清单 20. CSS 文件 a { color: red text-decoration: none } a:hover { color: black text-decoration: underline } 在我们的 CSS 中充斥着大量的数值型的 value，比如 color、padding、margin 等，这些数值之间在某些情况下是有着一定关系的，那么我们怎样利用 LESS 来组织我们这些数值之间的关系呢？我们来看这段代码：

清单 21 . LESS 文件 @init: #111111 @transition: @init*2 .switchColor { color: @transition }

经过编译生成的 CSS 文件如下：

清单 22. CSS 文件 .switchColor { color: #222222 }

上面的例子中使用 LESS 的 operation 是 特性，其实简单的讲，就是对数值型的 value（数字、颜色、变量等）进行加减乘除四则运算。同时 LESS 还有一个专门针对 color 的操作提供一组函数。

使用这些函数和 JavaScript 中使用函数一样。

清单 23 LESS 文件init: #f04615 #body { background-color: fadein(@init, 10%) }

经过编译生成的 CSS 文件如下：

清单 24. CSS 文件 #body { background-color: #f04615 }

从上面的例子我们可以发现，这组函数像极了 JavaScript 中的函数，它可以被调用和传递参数。这些函数的主要作用是提供颜色变换的功能，先把颜色转换成 HSL 色，然后在此基础上进行操作，LESS 还提供了获取颜色值的方法，在这里就不举例说明了。

LESS 提供的运算及函数特性适用于实现页面组件特性，比如组件切换时的渐入渐出。 同类框架还有 SASS :与 LESS 相比，两者都属于 CSS 预处理器，功能上大同小异，都是使用类似程序式语言的方式书写 CSS, 都具有变量、混入、嵌套、继承等特性，最终目的都是方便 CSS 的书写及维护。

LESS 和 SASS 互相促进互相影响，相比之下 LESS 更接近 CSS 语法。

● 混入(Mixins)——class中的class；

● 参数混入——可以传递参数的class，就像函数一样；

● 嵌套规则——Class中嵌套class，从而减少重复的代码；

● 运算——CSS中用上数学；

● 颜色功能——可以编辑颜色；

● 名字空间(namespace)——分组样式，从而可以被调用；

● 作用域——局部修改样式；

● JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

LESS和Sass的主要不同就是他们的实现方式，LESSS是基于JavaScript，所以，是在客户端处理的。

另一方面，Sass是基于Ruby的，然后是在服务器端处理的。很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。关于这个有很多种方式，我选择的是只在开发环节使用LESS。一旦我完成了开发，我就复制然后粘贴LESS输出的到一个压缩器，然后到一个单独的CSS文件来替代LESS文件。另一个选择是使用LESS.app来编译和压缩你的LESS文件。两个选择都将最小化你的样式输出，从而避免由于用户的浏览器不支持JavaScript而可能引起的任何问题。尽管这不大可能，但终归是有可能的。

关于变量在LESS和Sass中的唯一区别就是，LESS用@，Sass用$。同时还有一些作用域上的差别，我后面会提到。

混入(mixin)

偶尔，我们会创建一些会在样式表中重复使用的样式规则。没有人会阻止你在一个HTML的元素中使用多个class，但是你可以用LESS，在样式表中完成。

.border {

border-top: 1px dotted #333

}

article.post {

background: #eee

.border

}

ul.menu {

background: #ccc

.border

}

这可以给到你与你在两个元素中分别添加.bordered class同样的效果——而且仅仅在样式表中就完成了。而且它工作的很好：

文字和无序列表都被用上了边框样式

在Sass中，你要在样式规则前面添加@mixin声明，规定它是个嵌套。然后，通过@include来调用它。

@mixin border {

border-top: 1px dotted #333

}

article.post {

background: #eee

@include border

}

ul.menu {

background: #ccc

@include border

}

参数混入

就像在CSS中有函数功能一样，这些对于那些在现在的CSS工作中多余的工作非常有用。最好和最有用的例子就是我们正在经历的从CSS2到CSS3过渡过程中的很多浏览器私有前缀。Nettuts+有一篇Jeffrey Way写的很赞的视频和文章，内容是包含着由有用的参数组成的文件，他们涵盖了大部分使用各个浏览器私有前缀的CSS3属性。

.border-radius( @radius: 3px ) {

-webkit-border-radius: @radius

-moz-border-radius: @radius

border-radius: @radius

}

在这个例子中，.border-radius有个默认的3px的圆角，但是你可以使用你需要的任何值。.border-radius(10px)将会生成半径为10px的圆角。

Sass中的语法很像LESS，只是使用$声明变量，然后使用前面提到的@mixin和@include来调用。

选择器继承

这个东西LESS并没有提供。通过这个功能，你可以将一个选择器附加到已经预先定义的选择器上，而无需再使用逗号将两者分开的写法了。

.menu {

border: 1px solid #ddd

}

.footer {

@extend .menu

}

/* 上面的写法规则和下面的效果是一样的： */

.menu, .footer {

border: 1px solid #ddd

}

嵌套规则

在css中嵌套class和ID是避免你的样式干扰或者被别的样式干扰的唯一方法了。但是这可能会很凌乱。使用一个类似于#site-body .post .post-header h2 的选择器毫无吸引力而且会占用大量不必要的空格。使用LESS，你可以嵌套id、class以及标签。

#site-body { …

.post { …

.post-header { …

h2 { … }

a { …

&:visited { … }

&:hover { … }

}

}

}

}

上面的代码最终和上面的例子（那一长串的选择器）的效果一样，但是要更容易阅读和理解的多，而且它占用很少的空间。你也可以通过&来引用元素样式到他们的伪元素上，该功能类似于JavaScript中的this。

运算

这可能是你所期望的：使用数字或者变量在你的样式表中实现数学运算！

@base_margin: 10px

@double_margin: @base_margin * 2

@full_page: 960px

@half_page: @full_page / 2

@quarter_page: (@full_page / 2) / 2

声明下，我也意识到我可以除以4来获得@quarter_page变量，但是这里我只是想要演示下圆括号组成“运算顺序”在这里也是可以用的。在使用简写的规则中，小括号也是必须的，比如 border: (@width / 2) solid #000。

Sass在数字上比LESS更专业。它已经可以换算单位了。Sass可以处理无法识别的度量单位并将其输出。这个特性很明显是一个对未来的尝试——证明W3C作出的一些改变。

/* Sass */

2in + 3cm + 2pc = 3.514in

/* LESS */

2in + 3cm + 2pc = Error

Color函数

在文章开头，我提到了LESS如何帮我在编码过程中处理围绕着一个调色板。对此贡献最大的一部分就是颜色函数。加入你用一个标准的蓝色贯穿到你的样式中，然后你想要在表单中用这个蓝色来做一个渐变的按钮。你可以打开Photoshop或者其它的编辑器来获取一个比蓝色较浅的或者较暗的HEX色值来作为渐变色。或者，你可以只是使用LESS中的颜色函数。

@blue: #369

.submit {

padding: 5px 10px

border: 1px solid @blue

background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%)/*Moz*/

background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue, 10%)), color-stop(100%, @blue))/*Webkit*/

background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%)/*Opera*/

background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%)/*IE 10+*/

background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%)/*W3C*/

color: #fff

text-shadow: 0 -1px 1px rgba(0,0,0,0.4)

}

lighten函数很明显就是用百分比值来减轻颜色，在这个例子中，它将减轻这个基础的蓝色的10%。这种方法可以让我们变化的元素或者其它任何元素的颜色值——只是简单的改变基础颜色而已。这对于主题(模板)来说非常有用。而且，如果你使用参数功能，像上面提到的，你还可以更简单的应用到一些浏览器私有前缀的声明中，比如：.linear-gradient(lighten(@blue), @blue, 100%)。

还有很多其它的色彩函数，比如变暗或者调整颜色的饱和度，甚至你可以旋转色盘来使用其它颜色。我建议亲自尝试下你能想出的（用法）。

Sass貌似有更多的选项——但我并不需要这么多。我个人最常用的还是lighten和darken。如果你想了解更多，可以看一下这篇很详细的介绍。

条件语句与控制

这是一个的确很赞的东东，也是另一个LESS不支持的功能。使用 Sass，你可以使用if { } else { } 条件语句，以及for { }循环。它甚至支持 and、 or和 not，以及 <、 >、 <=、 >= 和 == 等操作符。

/* Sample Sass "if" statement */

@if lightness($color) >30% {

background-color: #000

} @else {

}

/* Sample Sass "for" loop */

@for $i from 1px to 10px {

.border-#{i} {

border: $i solid blue

}

}

名字空间(Namespaces)

名字空间可以用于组织我们的CSS到另一个档次，我们可以将一些公用的样式分组，然后在用的时候直接使用。例如，如果我们创建了一个名为default的样式分组，我们就可以在用到的时候直接从该组中调用。

#defaults {

.nav_list () {

list-style: none

margin: 0padding: 0

}

.button () { … }

.quote () { … }

}

然后，在我们的代码中，如果我们正好在一个nav元素中使用了ul元素，我们就会想到我们需要default样式。那么我们就可以简单的调用它，它也会被直接应用。

nav ul {

#defaults >.nav_list

}

作用域

作用域是编程中的标配，LESS中也是。如果你在你样式表的root级声明一个变量，它在整个文档中都是可以用的。然而，如果你在一个选择器，比如id或者class中，重新定义了这个变量，那么，它就只能在这个选择器中可用了——当然是重新定义后的新值。

@color: #00c/* 蓝色 */

#header {

@color: #c00/* red */

border: 1px solid @color/* 红色边框 */

}

#footer {

border: 1px solid @color/* 蓝色边框 */

}

因为我们在#header中重新定义了color变量，变量的值将会是不同的而且只会在该选择器中有效。它之前或者之后的所有地方，如果没有被重新定义，都会保持那个原始的值。

作用域在Sass中稍有不同。在上面的代码中，当@color变量变为红色后，代码中，此处之后的该变量的值，将会被重写（成为红色）。

注释

这一部分比较基础。LESS中允许两种注释写法。标准的CSS注释，/* comment */，是有效的，而且能够通过处理并正确输出。当行注释，// comment，同样可以用但是不能够通过处理也不能被输出，然后，结果是，“无声的”。

导入

导入也相当符合标准。标准的 @import: ‘classes.less’处理的很好。然而，如果你想要导入其它的LESS文件，那么文件的扩展名是可选的，所以 @import ‘classes’也是可行的。如果你想要导入一些无需LESS处理的内容，你可以使用 .css 扩展 (比如， @import: ‘reset.css’)。

字符串插入

字符串也是可以用于变量中的，然后通过@{name}来调用。

@base_url : 'http://www.qianduan.net'

background-image: url("@{base_url}/images/background.png")

转义(Escaping)

可能偶尔会需要引入一个CSS中非法或者LESS无法识别的值。通常是一些IE的hack。要避免抛出异常并破坏LESS，你将需要避开它们。

.class {

filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)"

}

/*实际上将会输出下面的代码: */

.class {

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20)

}

JavaScript 赋值

这是LESS中我最中意的部分：在样式表中使用Javascript——相当精彩。你可以使用表达式，也可以参考环境方向来使用反单引号。

@string: `'howdy'.toUpperCase()`/* @string 变成 'HOWDY' */

/* 你也可以使用前面提到的插值： */

@string: 'howdy'

@var: ~`'@{string}'.topUpperCase()`/* 变为 'HOWDY' */

/* 获取文档的信息 */

@height = `document.body.clientHeight`

输出格式

然而LESS并没有输出设置，而Sass提供4中输出选项：nested, compact, compressed 和 expanded。

结语

这两个方法有很多共同点。对写代码的设计师来说，它们都是很酷的工具，它们也可以帮助开发者更有效和快速的工作。如果你是Ruby或HTML的粉丝，那么Sass会是你的好助手。对我来说，一个PHP和JavaScript极客，我倾向于LESS，因为它便于引入和能够使用JavaScript的表达式以及文档属性。我怀疑我甚至接近真正理解在样式表中编程的可能行了，但是我仍坚持尝试。如果你在工作中有用到它们中的一个，或者两个都用，我很乐意听到关于它的更多内容，并看到你的成果。当然，技巧、诀窍、更正一直是很欢迎的。

变量：@变量名

混合：在a类中使用b类的所有属性， .a{ .b()color:#fff}

嵌套：使用嵌套代替原始css的层叠，&表示当前选择器的父级

运算：+ - * /，可以对任何数字、颜色或变量进行运算

转义：

函数：Less 内置了多种函数用于转换颜色、处理字符串、算术运算等

命名空间和访问符

作用域：首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承

注释： // 行注释，/.../块注释

导入：@import "library"可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了, .less 扩展名，可以省略掉

2.css modules

CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。产生局部作用域的唯一方法，就是使用一个独一无二的class的名字，不会与其他选择器重名。 CSS Modules是通过哈希算法将类名编译，保证类名的唯一性。

声明全局规则：

灵活按需导入以便复用代码，避免样式全局污染，但不利于写组件单元测试

3.CSS bem规范

BEM - Block Element Modfier（块，元素，编辑器）

在选择器中用三种符号来表示扩展关系

-中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。

__ 双下划线：双下划线用来连接块和块的子元素

-- 双中划线：用来描述一个块或者块的子元素的一种状态

type-block__element--modifier

Block:不是指html中的块元素，任何独立的页面元素都可以视为一个块，这个独立的块容器有一个唯一的css类名，也就是这个块的名字

Element:属于块的某部分，任何的在Block中的DOM节点，都是一个element。在一个已知的block中，所有的element在语义上都是相等的，Block下的所有Element不考虑层级嵌套关系，扁平化处理都属于Block，即连续的__下划线只能出现一次

Modifier:用于修饰块或元素，体现在外观或行为上的改变，都可作为一个修饰器，如active状态，add/edit的操作

注意事项：

1）保证各个部分只有一级B__E--M，修饰器需要和对应的块或元素一起使用，避免单独使用。不能有 .block__el1__el2 的格式

2）仅以类名作为选择器，不使用ID或标签名来约束选择器

...import'./index.less'...<divclassName="article"><divclassName="article__body"><pclassName="article__title">title</p><buttonclassName="article__button--primary"></button><buttonclassName="article__button--success"></button></div></div>//index.less文件.article{max-width:1200px&__body{padding:20px}&__title{font-weight:700}&__button{padding:5px8px&--primary{background:blue}&--success{background:green}}}