共计 14983 个字符，预计需要花费 38 分钟才能阅读完成。
一、Sass、LESS 和 Stylus 的语法
每一种语言都有自己一定的语法规则，CSS 预处理器语言也不例外，在真正使用 CSS 预处器语言之前还有一个不可缺少的知识点，就是对语法的理解。值得庆幸的是，这三款 CSS 预处理器语言的语法和 CSS 语法都差不多。
1.Sass 语法
Sass3.0 版本开始使用的是标准的 CSS 语法，和 SCSS 可以说是一样的。这样 Sass 代码转换成 CSS 代码变得更容易。默认 Sass 使用.scss 扩展名。Sass 语法规则可以像 CSS 那样书写：
/*style.sass 新版语法规则 */
h1{
color:#936;
background-color:#333;
}
正如你所看到的，在 Sass 样式中，这样的代码是在简单不过的了。重要的一点是，Sass 也同时支持老的语法，老的语法和常规的 CSS 语法略有不同，他需要严格的语法，任何的缩进和字符的错误都会造成样式的编译错误。Sass 可以省略大括号（{}）和分号（；），完全依靠严格的缩进和格式化代码，而且文件使用.sass 扩展名，他的语法类似于：
/*style.sass*/
h1
color:#936
background-color: #333
2.LESS 语法
LESS 是 CSS 的一种扩展形式，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能。就语法规则而言，LESS 和 Sass 一样，都是使用 CSS 的标准语法，只是 LESS 的源文件的扩展名是.less，其基本语法类似于：
/*style.less*/
h1 {
color: #963;
background-color: #333;
}
3.Stylus 语法
Stylus 的语法花样多一些，它的文件扩展名是.styl，Stylus 也接受标准的 CSS 语法，但是他也像 Sass 老的语法规则，使用缩进控制，同时 Stylus 也接受不带大括号（{}）和分号的语法，如下所示：
/*style.styl*/
/* 类似于 CSS 标准语法 */
h1 {
color: #963;
background-color:#333;
}
/* 省略大括号（{}）*/
h1
color: #963;
background-color: #333;
/* 省略大括号（{}）和分号（;）*/
h1
color:#963
background-color:#333
在 Stylus 样式中，你也可以在同一个样式文件中使用不同的语法规则，下面这样的写法也不会报错：
/*style.styl*/
h1 {
color #963
}
h2
font-size:1.2em
二、Sass、LESS 和 Stylus 特性
这三款 CSS 预处理器语言具有一些相同的特性，例如：变量、混入、嵌套、函数等。在这一节中，我们依次来对比一下这三款 CSS 预处理器语言各种特性的异同之处，以及使用方法。
1. 变量（Variables）
如果你是一个开发人员，变量应该是你最好朋友之一。在 CSS 预处理器语言中你也可以声明变量，并在整个样式表中使用。CSS 预处理器语言支持任何变量（例如：颜色、数值、文本）。然后你可以在任意地方引用变量。
a)Sass 的变量
Sass 声明变量必须是“$”开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号（：）分隔开。就像 CSS 属性设置一样：
/* 声明变量 */
$mainColor: #963;
$siteWidth: 1024px;
$borderStyle: dotted;
/* 调用变量 */ | /* 转译出来的 CSS*/
——————————————+——————————
body {| body {
color: $mainColor; | color: #963;
border:1px $borderStyle $mainColor; | border:1px dotted #963;
max-width: $siteWidth; | max-width: 1024px;
} | }
b) LESS 的变量
LESS 样式中声明变量和调用变量和 Sass 一样，唯一的区别就是变量名前面使用的是“@”字符：
/* 声明变量 */
@mainColor: #963;
@siteWidth: 1024px;
@borderStyle: dotted;
/* 调用变量 */ | /* 转译出来的 CSS*/
—————————————-+——————————-
body {| body {
color: @mainColor; | color:#963;
border:1px @borderStyle @mainColor; | border:1px dotted #963;
max-width: @siteWidth; | max-width:1024px;
}
| }
c)Stylus 的变量
Stylus 样式中声明变量没有任何限定，你可以使用“$”符号开始。结尾的分号（;）可有可无，但变量名和变量值之间的等号（=）是需要的。有一点需要注意的是，如果我们使用“@”符号开头来声明（0.22.4）变量，Stylus 会进行编译，但其对应的值并不会赋值给变量。换句话说，在 Stylus 中不要使用“@”符号开头声明变量。Stylus 中调用变量的方法和 LESS、Sass 是完全相同的。
/* 声明变量 */
mainColor = #963;
siteWidth = 1024px;
$borderStyle = dotted;
/* 调用变量 */ | /* 转译出来的 CSS*/
—————————————-+——————————–
body | body {
color mainColor | color: #963;
border 1px $borderStyle mainColor | border:1px dotted #963
max-width siteWidth | max-width:1024px;
| }
Stylus 还有一个独特功能，不需要分配值给变量就可以定义引用属性：
/* 水平垂直居中 */ | /* 转译出来的 CSS*/
————————————+————————————
#logo | #logo {
position absolute | position:absolute;
top 50% | top:50%;
left 50% | left:50%;
width w = 150px | width:150px;
height h = 80px | height:80px;
margin-left -(w / 2) | margin-left:-75px;
margin-top -(h / 2) | margin-top:-40px;
| }
从上面的代码中我们可以看出，CSS 预处理器语言中的变量是值级别的重复使用，可以将相同的值定义成变量统一管理起来。CSS 预处理器语言中变量的特性适用于定义主题（也就是我们常说的换肤），我们可以将背景颜色、字体颜色、边框属性等常规样式统一定义，这样不同的主题只需要定义不同的变量文件就可以。
2. 作用域（Scope）
CSS 预处理器语言中的变量和其他程序语言一样，可以实现值的复用，同样它也存在生命周期，也就是 Scope（变量范围，开发人员习惯称之为作用域），简单点讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。下面我们通过一个简单的例子来解释这三款 CSS 预处理器的作用域使用。
a)Sass 的作用域
Sass 中作用域在这三款预处理器是最差的，可以说在 Sass 中是不存在什么全局变量。具体来看下面的代码：
/*Sass 样式 */
$color: black;
.scoped {
$bg: blue;
$color: white;
color: $color;
background-color:$bg;
}
.unscoped {
color:$color;
}
先看转译出来的 CSS 样式：
.scoped {
color:white;/* 是白色 */
background-color:blue;
}
.unscoped {
color:white;/* 白色（无全局变量概念）*/
}
示例明显的告诉我们，在 Sass 样式中定义变量，调用变量是没有全局变量一个概念存在，因此在 Sass 中定义了相同变量名时，在调用之时千万要多加小心，不然会给你的样式带来错误。
b)LESS 的作用域
LESS 中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止，同样上面的例子，我们来看看他在 LESS 下所起的变化。
/*LESS 样式 */
@color: black;
.scoped {
@bg: blue;
@color: white;
color: @color;
background-color:@bg;
}
.unscoped {
color:@color;
}
转译出来的 CSS 样式：
.scoped {
color:white;/* 白色（调用了局部变量）*/
background-color:blue;
}
.unscoped {
color:black;/* 黑色（调用了全局变量）*/
}
c)Stylus 的作用域
Stylus 虽然起步比较晚，但其作用域的特性和 LESS 一样，可以支持全局变量和局变量。会向上冒泡查找，直到根为止。
3. 混合(Mixins)
Mixins 是 CSS 预处理器中语言中最强大的特性，简单点来说，Mixins 可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。平时你在写样式时肯定有碰到过，某段 CSS 样式经常要用到多个元素中，这样你就需要重复的写多次。在 CSS 预处理器语言中，你可以为这些公用的 CSS 样式定义一个 Mixin，然后在你 CSS 需要使用这些样式的地方直接调用你定义好的 Mixin。这是一个非常有用的特性，Mixins 被当作一个公认的选择器，还可以在 Mixins 中定义变量或者默认参数。
a)Sass 的混合
Sass 样式中声明 Mixins 时需要使用“@mixin”，然后后面紧跟 Mixins 的名，他也可以定义参数，同时可以给这个参数设置一个默认值，但参数名是使用“$”符号开始，而且和参数值之间需要使用冒号（：）分开。
在选择器调用定义好的 Mixins 需要使用“@include”，然后在其后紧跟你要调用的 Mixins 名。不过在 Sass 中还支持老的调用方法，就是使用加号“+”调用 Mixins，在“+”后紧跟 Mixins 名。一起来看个简单的例子，比如说在你的 Sass 样式中定义了一个名叫“error”的 Mixin，这个“error”设置了一个参数“$borderWidth”，在没特别定义外，这个参数的默认值设置为“2px”：
/* 声明一个 Mixin 叫作“error”*/
@mixin error($borderWidth:2px){
border:$borderWidth solid #f00;
color: #f00;
}
/* 调用 error Mixins*/
.generic-error {
@include error();/* 直接调用 error mixins*/
}
.login-error {
@include error(5px);/* 调用 error mixins，并将参数 $borderWidth 的值重定义为 5px*/
}
b)LESS 的混合
在 LESS 中，混合是指将定义好的“ClassA”中引入另一个已经定义的“Class”，就像在当前的“Class”中增加一个属性一样。
不过 LESS 样式中声明 Mixins 和 Sass 声明方法不一样，他更像 CSS 定义样式，在 LESS 可以将 Mixins 看成是一个类选择器，当然 Mixins 也可以设置参数，并给参数设置默认值。不过设置参数的变量名是使用“@”开头，同样参数和默认参数值之间需要使用冒号（：）分隔开。
正如 Sass 混合是的示例，同样在 LESS 样式中定义一个名叫“error”的 Mixin，这个“error”设置了一个参数“@borderWidth”，在没有特别定义外，这个参数的默认值是“2px”：
/* 声明一个 Mixin 叫作“error”*/
.error(@borderWidth:2px){
border:@borderWidth solid #f00;
color: #f00;
}
/* 调用 error Mixins*/
.generic-error {
.error();/* 直接调用 error mixins*/
}
.login-error {
.error(5px);/* 调用 error mixins，并将参数 @borderWidth 的值重定义为 5px*/
}
c)Stylus 的混合
Stylus 中的混合和前两款 CSS 预处理器语言的混合略有不同，他可以不使用任何符号，就是直接声明 Mixins 名，然后在定义参数和默认值之间用等号（=）来连接。
/* 声明一个 Mixin 叫作“error”*/
error(borderWidth=2px){
border:borderWidth solid #f00;
color: #f00;
}
/* 调用 error Mixins*/
.generic-error {
error();/* 直接调用 error mixins*/
}
.login-error {
error(5px);/* 调用 error mixins，并将参数 $borderWidth 的值重定义为 5px*/
}
三个示例都将会转译成相同的 CSS 代码：
.generic-error {
border: 2px solid #f00;
color:#f00;
}
.login-error {
border:5px solid #f00;
color: #f00;
}
4. 嵌套（Nesting）
CSS 预处理器语言中的嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而减少代码量，并且增加了代码的可读性。比如说，我们在 CSS 中多个元素有一个相同的父元素，那么写样式会变得很乏味，我们需要一遍一遍的在每个元素前写这个父元素，除非给特定的元素添加类名“class”或者 ID。
section {
margin:10px;
}
section nav {
height:25px;
}
section nav a {
color: #0982c1;
}
section nav a:hover {
text-decoration: underline;
}
相反，使用 CSS 预处理器语言的嵌套特性，我们可以在父元素的大括号（{}）里写这些元素。同时可以使用“&”符号来引用父选择器。对于 Sass、LESS 和 Stylus 这三款 CSS 预处理器语言的嵌套选择器来说，他们都具有相同的语法：
section {
margin:10px;
nav {
height:25px;
a {
color:#0982c1;
&:hover {
text-decoration:underline;
}
}
}
}
上面的预处理器转译出来的 CSS 代码和我们开始展示的 CSS 代码是相同的，非常的方便吧！
5. 继承（Inheritance）
对于熟悉 CSS 的同学来说，对于属性的继承并不陌生。平时在写 CSS 样式常碰到多个元素应用相同的样式时，我们在 CSS 中通常都是这样写：
p,ul,ol{/* 样式写在这里 */}
这样做非常的好，但往往我们需要给单独元素添加另外的样式，这个时候我们就需要把其中选择器单独出来写样式，如此一来我们维护样式就相当的麻烦。为了应对这个问题，CSS 预处理器语言可以从一个选择继承另个选择器下的所有样式。
a)Sass 和 Stylus 的继承
Sass 和 Stylus 的继承是把一个选择器的所有样式继承到另个选择器上。在继承另个选择器的样式时需要使用“@extend”开始，后面紧跟被继承的选择器：
.block {
margin: 10px 5px;
padding: 2px;
}
p {
@extend .block;/* 继承.block 选择器下所有样式 */
border: 1px solid #eee;
}
ul,ol {
@extend .block; /* 继承.block 选择器下所有样式 */
color: #333;
text-transform: uppercase;
}
上面的代码转译成 CSS：
.block,p,ul,ol {
margin: 10px 5px;
padding:2px;
}
p {
border: 1px solid #eee
}
ul,ol {
color:#333;
text-transform:uppercase;
}
b)LESS 的继承
LESS 支持的继承和 Sass 与 Stylus 不一样，他不是在选择器上继承，而是将 Mixins 中的样式嵌套到每个选择器里面。这种方法的缺点就是在每个选择器中会有重复的样式产生。
.block {
margin: 10px 5px;
padding: 2px;
}
p {
.block;/* 继承.block 选择器下所有样式 */
border: 1px solid #eee;
}
ul,ol {
.block; /* 继承.block 选择器下所有样式 */
color: #333;
text-transform: uppercase;
}
转译出来的 CSS 代码：
.block {
margin: 10px 5px;
padding:2px;
}
p {
margin: 10px 5px;
padding:2px;
border: 1px solid #eee
}
ul,ol {
margin: 10px 5px;
padding:2px;
color:#333;
text-transform:uppercase;
}
正如所看到的，上面的代码“.block”的样式将会被插入到相应的你要继承的选择器中，但需要注意的是优先级的问题。
6. 运算符（Operations）
CSS 预处理器语言还具有运算的特性，其简单的讲，就是对数值型的 Value（如：数字、颜色、变量等）进行加减乘除四则运算。这样的特性在 CSS 样式中是想都不敢想的，但在 CSS 预处理器语言中对样式做一些运算一点问题都没有了，例如：
@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;
上面代码是 LESS 的运算示例，声明一下，在取得“@quarter_page”变量时，我们可以直接除以 4，但是在这里，我们只是想演示一下圆括号组成的“运算顺序”（这个运算顺序小学生也知道）。在复合型运算中，小括号也是很有必要的，例如：
border: (@width / 2) solid #000;
Sass 在数字运算上要比 LESS 更专业，他可以直接换算单位了。Sass 可以处理无法识别的度量单位，并将其输出。这个特性很明显是一个对未来的尝试——证明 W3C 作出的一些改变。Stylus 的运算是三款预处理器语言中最强大的一款，他拥有其他程序语言一样的运算功能，简单点的加减乘除，复杂的有关系运算、逻辑运算等。受限于篇幅，感兴趣的同学可以到官网上仔细阅读。
7. 颜色函数
颜色函数是 CSS 预处理器语言中内置的颜色函数功能，这些功能可以对颜色进行处理，例如颜色的变亮、变暗、饱和度控制、色相控制，渐变颜色等处理十分的方便。
a)Sass 颜色函数
lighten($color, 10%); /* 返回的颜色在 $color 基础上变亮 10% */
darken($color, 10%); /* 返回的颜色在 $color 基础上变暗 10% */
saturate($color, 10%); /* 返回的颜色在 $color 基础上饱和度增加 10% */
desaturate($color, 10%); /* 返回的颜色在 $color 基础上饱和度减少 10% */
grayscale($color); /* 返回 $color 的灰度色 */
complement($color); /* 返回 $color 的补色 */
invert($color); /* 返回 $color 的反相色 */
mix($color1, $color2, 50%); /* $color1 和 $color2 的 50% 混合色 */
这只是 Sass 中颜色函数的一个简单列表，更多详细的介绍可以阅读 Sass 文档。颜色函数可以运用到任何一个元素上，只要其有颜色的属性，下面是一个简单的例子：
$color: #0982C1;
h1 {
background: $color;
border: 3px solid darken($color, 50%);/* 边框颜色在 $color 的基础上变暗 50%*/
}
b)LESS 颜色函数
lighten(@color, 10%); /* 返回的颜色在 @color 基础上变亮 10% */
darken(@color, 10%); /* 返回的颜色在 @color 基础上变暗 10%*/
saturate(@color, 10%); /* 返回的颜色在 @color 基础上饱和度增加 10% */
desaturate(@color, 10%); /* 返回的颜色在 @color 基础上饱和度降低 10%*/
spin(@color, 10); /* 返回的颜色在 @color 基础上色调增加 10 */
spin(@color, -10); /* 返回的颜色在 @color 基础上色调减少 10 */
mix(@color1, @color2); /* 返回的颜色是 @color1 和 @color2 两者的混合色 */
LESS 的完整颜色函数功能，请阅读 LESS 文档。下面是 LESS 中如何使用一个颜色函数的简单例子：
@color: #0982C1;
h1 {
background: @color;
border: 3px solid darken(@color, 50%);
}
c)Stylus 的颜色函数
lighten(color, 10%); /* 返回的颜色在 ’color’ 基础上变亮 10% */
darken(color, 10%); /* 返回的颜色在 ’color’ 基础上变暗 10% */
saturate(color, 10%); /* 返回的颜色在 ’color’ 基础上饱和度增加 10% */
desaturate(color, 10%); /* 返回的颜色在 ’color’ 基础上饱和度降低 10% */
有关于 Stylus 的颜色函数介绍，请阅读 Stylus 文档。下面是 Stylus 颜色函数的一个简单实例：
color = #0982C1
h1
background color
border 3px solid darken(color, 50%)
从上面展示的部分颜色函数可以告诉我们，Sass、LESS 和 Stylus 都具有强大的颜色函数功能，功能特性上都大同小异，只是在使用方法上略有不同。而且他们都具有相同的一个目的，就是方便操作样式中的颜色值。
8. 导入（Import）
在 CSS 中，并不喜欢用 @import 来导入样式，因为这样的做法会增加 http 的请求。但是在 CSS 预处理器中的导入 (@import) 规则和 CSS 的有所不同，它只是在语义上导入不同的文件，但最终结果是生成一个 CSS 文件。如果你是通过“@import‘file.css’”导入“file.css”样式文件，那效果跟普通 CSS 导入样式文件一样。注意：导入文件中定义了变量、混合等信息也将会被引入到主样式文件中，因此需要避免他们的相互冲突。
Sass、LESS 和 Stylus 三款 CSS 预处理器语言，导入样式的方法都是一样：被导入文件的样式：
/* file.{type} */
body {
background: #EEE;
}
需要导入样式的文件：
@import “reset.css”;
@import “file.{type}”;
p {
background: #0982C1;
}
转译出来的 CSS 代码：
@import “reset.css”;
body {
background: #EEE;
}
p {
background: #0982C1;
}
9. 注释（Comment）
CSS 预处理器语言中的注释是比较基础的一部分，这三款预处理器语言除了具有标准的 CSS 注释之外，还具有单行注释，只不过单行注释不会被转译出来。
a)Sass、LESS 和 Stylus 的多行注释
多行注释和 CSS 的标准注释，他们可以输出到 CSS 样式中，但在 Stylus 转译时，只有在“compress”选项未启用的时候才会被输出来。
/*
* 我是注释
*/
body
padding 5px
b)Sass、LESS 和 Stylus 的单行注释
单行注释跟 JavaScript 语言中的注释一样，使用双斜杠（//），但单行注释不会输出到 CSS 中。
// 我是注释
@mainColor：#369;// 定义主体颜色
在 Stylus 中除了以上两种注释之外，他还有一种注释，叫作多行缓冲注释。这种注释跟多行注释类似，不同之处在于始的时候，这里是”/*！”。这个相当于告诉 Stylus 压缩的时候这段无视直接输出。
/*!
* 给定数值合体
*/
add(a, b)
a + b
上面从九个常用的特性对 Sass、LESS 和 Stylus 三款 CSS 预处理器语言的使用做了对比，在某些特性上可以说是一模一样，而有一些特性上功能其实一样，只是在部分书写规则上有所不同。当然有些特性是完全不同。在这里几是从使用方法上做为一个比较，主要目的是让大家经过对比之后，使自己选择哪一款 CSS 预处理器语言有所方向和帮助。
三、CSS 预处理器的高级应用
我们知道，Sass、LESS 和 Stylus 都具有变量、混合、嵌套、函数和作用域等特性，但这些特性都是一些普通的特性。其实除了这些特性之外，他们还拥有一些很有趣的特性有助于我们的开发，例如条件语句、循环语句等。接下来，我们同样从使用上来对比一下这三款 CSS 预处理器语言在这方面应用又有何不同异同。
a)条件语句
说到编程，对于编程基本控制流，大家并不会感到陌生，除了循环就是条件了。条件提供了语言的可控制，否则就是纯粹的静态语言。提供的条件有导入、混合、函数以及更多。在编程语言中常见的条件语句：
if/else if/else
if 表达式满足（true）的时候执行后面语然块，否则，继续后面的 else if 或 else。在这三款 CSS3 预处理器语言中都具有这种思想，只不过 LESS 中表达的方式略有不现，接下来我们依次看看他们具体如何使用。
Sass 的条件语句
Sass 样式中的条件语句和其他编程语言的条件语句非常相似，在样式中可以使用“@if”来进行判断：
p {
@if 1 + 1 == 2 {border: 1px solid;}
@if 5 < 3 {border: 2px dotted;}
@if null {border: 3px double;}
}
编译出来的 CSS：
p {
border: 1px solid;
}
在 Sass 中条件语句还可以和 @else if、@else 配套使用：
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
转译出来的 CSS：
p {color:green;}
Stylus 的条件语句
Stylus 的条件语句的使用和其他编程的条件语句使用基本类似，不同的是他可以在样式去省略大括号（{}）：
box(x, y, margin = false)
padding y x
if margin
margin y x
body
box(5px, 10px, true)
Stylus 同样可以和 else if、else 配套使用：
box(x, y, margin-only = false)
if margin-only
margin y x
else
padding y x
Stylus 除了这种简单的条件语句应用之外，他还支持后缀条件语句。这就意味着 if 和 unless（熟悉 Ruby 程序语言的用户应该都知道 unless 条件，其基本上与 if 相反，本质上是“(!(expr))”）当作操作符；当右边表达式为真的时候执行左边的操作对象。例如，我们定义了 negative()来执行一些基本的检查。下面我们使用块式条件：
negative(n)
unless n is a ‘unit’
error(‘ 无效数值 ’)
if n < 0
yes
else
no
接下来，我们利用后缀条件让我们的方法简洁：
negative(n)
error(‘ 无效数值 ’) unless n is a ‘unit’
return yes if n < 0
no
当然，我们可以更进一步。如这个“n < 0 ? yes : no”可以用布尔代替：“n < 0”。后缀条件适合于大多数的单行语句。如“@import,@charset”混合书写等。当然，下面所示的属性也是可以的：
pad(types = margin padding, n = 5px)
padding unit(n, px) if padding in types
margin unit(n, px) if margin in types
body
pad()
body
pad(margin)
body
apply-mixins = true
pad(padding, 10) if apply-mixins
上面代码转译出来的 CSS：
body {
padding: 5px;
margin: 5px;
}
body {
margin: 5px;
}
body {
padding: 10px;
}
LESS 的条件语句
LESS 的条件语句使用有些另类，他不是我们常见的关键词 if 和 else if 之类，而其实现方式是利用关键词“when”。
.mixin (@a) when (@a >= 10) {
background-color: black;
}
.mixin (@a) when (@a < 10) {
background-color: white;
}
.class1 {.mixin(12) }
.class2 {.mixin(6) }
转译出来的 CSS：
.class1 {
background-color: black;
}
.class2 {
background-color: white;
}
利用 When 以及 <、>、=、<=、>= 是十分简单和方便的。LESS 并没有停留在这里，而且提供了很多类型检查函数来辅助条件表达式，例如：iscolor、isnumber、isstring、iskeyword、isurl 等等。
.mixin (@a) when (iscolor(@a)) {
background-color: black;
}
.mixin (@a) when (isnumber(@a)) {
background-color: white;
}
.class1 {.mixin(red) }
.class2 {.mixin(6) }
转译出来的 CSS
.class1 {
background-color: black;
}
.class2 {
background-color: white;
}
另外，LESS 的条件表达式同样支持 AND 和 OR 以及 NOT 来组合条件表达式，这样可以组织成更为强大的条件表达式。需要特别指出的一点是，OR 在 LESS 中并不是 or 关键词，而是用, 来表示 or 的逻辑关系。
.smaller (@a, @b) when (@a > @b) {
background-color: black;
}
.math (@a) when (@a > 10) and (@a < 20) {
background-color: red;
}
.math (@a) when (@a < 10)，(@a > 20) {
background-color: blue;
}
.math (@a) when not (@a = 10) {
background-color: yellow;
}
.math (@a) when (@a = 10) {
background-color: green;
}
.testSmall {.smaller(30, 10) }
.testMath1 {.math(15)}
.testMath2 {.math(7)}
.testMath3 {.math(10)}
转译出来的 CSS
.testSmall {
background-color: black;
}
.testMath1 {
background-color: red;
background-color: yellow;
}
.testMath2 {
background-color: blue;
background-color: yellow;
}
.testMath3 {
background-color: green;
}
b)循环语句
Sass 和 Stylus 还支持 for 循环语句，而 LESS 并没支持 for 循环语句，但值得庆幸的是，在 LESS 中可以使用 When 来模拟出 for 循环的特性。
Sass 的循环语句
Sass 中使用 for 循环语句需要使用 @for，并且配合“from”和“through”一起使用，其基本语法：
@for $var from <start> through <end> {语句块}
我们来看一个简单的例子：
@for $i from 1 through 3 {
.item-#{$i} {width: 2em * $i;}
}
转译出来的 CSS 代码：
.item-1 {width: 2em;}
.item-2 {width: 4em;}
.item-3 {width: 6em;}
在 Sass 中循环语句除了 @for 语句之外，还有 @each 语句和 @while 语句 @each 循环语法：
@each $var in <list>{语句块}
来看个简单的实例：
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url(‘/images/#{$animal}.png’);
}
}
转译出来的 CSS
.puma-icon {background-image: url(‘/images/puma.png’); }
.sea-slug-icon {background-image: url(‘/images/sea-slug.png’); }
.egret-icon {background-image: url(‘/images/egret.png’); }
.salamander-icon {background-image: url(‘/images/salamander.png’) }
@while 循环使用和其他编程语言类似：
$i: 6;
@while $i > 0 {
.item-#{$i} {width: 2em * $i;}
$i: $i – 2;
}
转译出来的 CSS
.item-6 {width: 12em;}
.item-4 {width: 8em;}
.item-2 {width: 4em;}
Stylus 的循环语句
在 Stylus 样式中通过 for/in 对表达式进行循环，形式如下：
for <val-name> [, <key-name>] in <expression>
例如：
body
for num in 1 2 3
foo num
转译出来 CSS
body {
foo: 1;
foo: 2;
foo: 3;
}
下面这个例子演示了如何使用 <key-name>：
body
fonts = Impact Arial sans-serif
for font, i in fonts
foo i font
转译出来的 CSS
body {
foo: 0 Impact;
foo: 1 Arial;
foo: 2 sans-serif;
}
LESS 的循环语句
在 LESS 语言中并没有现在的循环语句，可是像其条件语句一样，通过 when 来模拟出他的循环功能。
.loopingClass (@index) when (@index > 0) {
.myclass {
z-index: @index;
}
// 递归
.loopingClass(@index – 1);
}
// 停止循环
.loopingClass (0) {}
// 输出
.loopingClass (3);
转译出的 CSS
.myclass {z-index: 3;}
.myclass {z-index: 2;}
.myclass {z-index: 1;}
相比之下，Sass 和 Stylus 对条件语句和循环语句的处理要比 LESS 语言强大。因为他们具有真正的语言处理能力。
综上所述，我们对 Sass、LESS 和 Stylus 做一个简单的对比总结：三者都是开源项目；Sass 诞生是最早也是最成熟的 CSS 预处理器，有 Ruby 社区和 Compass 支持；Stylus 早期服务器 NodeJS 项目，在该社区得到一定支持者；LESS 出现于 2009 年，支持者远超于 Ruby 和 Node JS 社区；Sass 和 LESS 语法较为严谨、严密，而 Stylus 语法相对散漫，其中 LESS 学习起来更快一些，因为他更像 CSS 的标准；Sass 和 LESS 相互影响较大，其中 Sass 受 LESS 影响，已经进化到了全面兼容 CSS 的 SCSS；Sass 和 LESS 都有第三方工具提供转译，特别是 Sass 和 Compass 是绝配；Sass、LESS 和 Stylus 都具有变量、作用域、混合、嵌套、继承、运算符、颜色函数、导入和注释等基本特性，而且以“变量”、“混合”、“嵌套”、“继承”和“颜色函数”称为五大基本特性，各自特性实现功能基本相似，只是使用规则上有所不同；Sass 和 Stylus 具有类似于语言处理的能力，比如说条件语句、循环语句等，而 LESS 需要通过 When 等关键词模拟这些功能，在这一方面略逊一层；
