1、LESS的官網：http://lesscss.org
2、Sass官網地址：http://sass-lang.com
3、Stylus官網：http://learnboost.github.com/stylus
五、Sass、LESS和Stylus的語法
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 through {語句塊}
我們來看一個簡單的例子：
@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 {語句塊}
來看個簡單的實例：
@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 [, ] in
例如：
body
for num in 1 2 3
foo num
轉譯出來CSS
body {
foo: 1;
foo: 2;
foo: 3;
}
下面這個例子演示了如何使用：
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早期服務器Node JS項目，在該社區得到一定支持者；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等關鍵詞模擬這些功能，在這一方面略遜一層；
上面是CSS預處理器語言中的Sass、LESS和Stylus在某些方面的對比，相對于CSS來說，上面都是CSS預處理器語言的優點？那么他有沒有缺點呢？
萬物都有陰陽兩極，有圓就有缺，CSS預處理器語言也逃避不了這個宿命。個人感覺CSS預處理器語言那是程序員的玩具，想通過編程的方式跨界解決 CSS的問題?？梢訡SS應該面臨的問題一個也少不了，只是增加了一個編譯過程而已，簡單來說CSS預處理器語言較CSS玩法變得更高級了，但同時降低了 自己對最終代碼的控制力。更致命的是提高了門檻，首先是上手門檻，其次是維護門檻，再來是團隊整體水平和規范的門檻。這也造成了初學學習成本的昂貴。
全文從Sass、LESS和Stylus的背景介紹、安裝步驟、轉譯方法、語法規則、基本特性和高級應用六個方面對目前世面上流行的三款CSS預處 理器語法做了一個對比。他們各有各的優勢，也各有各的劣勢?，F在我們又回到當初提的問題“我應該選擇哪種CSS預處理器？”。不知道你是否可以做出選擇？
