CSS(Cascading Style Sheet)被譯為級聯樣式表，做為壹名前端從業人員來說，這個專業名詞並不陌生，在行業中通常稱之為“風格樣式表（Style Sheet）”，它主要是用來進行網頁風格設計的。通過設立樣式表，可以統壹地控制HTML（XHTML）中各標簽的顯示屬性。可以使人更能有效的控制Web頁面（或Web應用程序）外觀，可以精確指定Web元素位置，外觀以及創建特殊效果的能力。CSS擁有對網頁對象和模型樣式編輯能力，並能夠進行初步交互設計，是目前基於文本展示最優秀的表現設計語言。CSS能夠根據 不同使用者的理解能力，簡化或者優化寫法，針對各類人群有較強的易讀性。
就CSS本身而言，對於大多數Web前端從業人員來說就不是問題。學過CSS的人都知道，它不是壹種編程語言。妳可以用它開發網頁樣式，但是沒法用它編程。換句話說，CSS基本上是設計師的工具，不是程序員的工具。在程序員的眼裏，CSS是很頭痛的事情，它並不像其它程序語言，比如說PHP、Javascript等等，有自己的變量、常量、條件語句以及壹些編程語法，只是壹行行單純的屬性描述，寫起來相當的費事，而且代碼難易組織和維護。
很自然的，有人就開始在想，能不能給CSS像其他程序語言壹樣，加入壹些編程元素，讓CSS能像其他程序語言壹樣可以做壹些預定的處理。這樣壹來，就有了“CSS預處器（CSS Preprocessor）”。
壹、什麽是CSS預處器
CSS預處理器定義了壹種新的語言，其基本思想是，用壹種專門的編程語言，為CSS增加了壹些編程的特性，將CSS作為目標生成文件，然後開發者就只要使用這種語言進行編碼工作。通俗的說，CSS預處理器用壹種專門的編程語言，進行Web頁面樣式設計，然後再編譯成正常的CSS文件，以供項目使用。CSS預處理器為CSS增加壹些編程的特性，無需考慮瀏覽器的兼容性問題，例如妳可以在CSS中使用變量、簡單的邏輯程序、函數等等在編程語言中的壹些基本特性，可以讓妳的CSS更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處。
CSS預處理器技術已經非常的成熟，而且也湧現出了很多種不同的CSS預處理器語言，比如說：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。如此之多的CSS預處理器，那麽“我應該選擇哪種CSS預處理器？”也相應成了最近網上的壹大熱門話題，在Linkedin、Twitter、CSS-Trick、知呼以及各大技術論壇上，很多人為此爭論不休。相比過計我們對是否應該使用CSS預處理器的話題而言，這已經是很大的進步了。
到目前為止，在眾多優秀的CSS預處理器語言中就屬Sass、LESS和Stylus最優秀，討論的也多，對比的也多。本文將分別從他們產生的背景、安裝、使用語法、異同等幾個對比之處向妳介紹這三款CSS預處理器語言。相信前端開發工程師會做出自己的選擇——我要選擇哪款CSS預處理器。
二、Sass、LESS和Stylus背景介紹
為了能更好的了解這三款流行的CSS預處理器，我們先從其背景入手，簡單的了解壹下各自的背景信息。
1.Sass背景介紹
Sass是對CSS（層疊樣式表）的語法的壹種擴充，誕生於2007年，最早也是最成熟的壹款CSS預處理器語言，它可以使用變量、常量、嵌套、混入、函數等功能，可以更有效有彈性的寫出CSS。Sass最後還是會編譯出合法的CSS讓瀏覽器使用，也就是說它本身的語法並不太容易讓瀏覽器識別，因為它不是標準的CSS格式，在它的語法內部可以使用動態變量等，所以它更像壹種極簡單的動態語言。
其實現在的Sass已經有了兩套語法規則：壹個依舊是用縮進作為分隔符來區分代碼塊的；另壹套規則和CSS壹樣采用了大括號（｛｝）作為分隔符。後壹種語法規則又名SCSS，在Sass3之後的版本都支持這種語法規則。
2.LESS的背景介紹
2009年開源的壹個項目，受Sass的影響較大，但又使用CSS的語法，讓大部分開發者和設計師更容易上手。LESS提供了多種方式能平滑的將寫好的代碼轉化成標準的CSS代碼，在很多流行的框架和工具中已經能經常看到LESS的身影了（例如Twitter的Bootstrap框架就使用了LESS）。
根據維基百科上的介紹，其實LESS是Alexis Sellier受Sass的影響創建的壹個開源項目。當時SASS采用了縮進作為分隔符來區分代碼塊，而不是CSS中廣為使用的大括號（｛｝）。為了讓CSS現有的用戶使用起來更佳方便，Alexis開發了LESS並提供了類似CSS的書寫功能。
3.Stylus背景介紹
Stylus，2010年產生，來自於Node.js社區，主要用來給Node項目進行CSS預處理支持，在此社區之內有壹定支持者，在廣泛的意義上人氣還完全不如Sass和LESS。
Stylus被稱為是壹種革命性的新語言，提供壹個高效、動態、和使用表達方式來生成CSS，以供瀏覽器使用。Stylus同時支持縮進和CSS常規樣式書寫規則。
註：Stylus上下載Ruby安裝文件（隨意選擇壹個版本），此處選擇的是最新版本Ruby1.9.3-p385：
Ruby安裝文件下載好後，可以按應用軟件安裝步驟進行安裝Ruby。在安裝過程中，個人建議將其安裝在C盤下，在安裝過程中選擇第二個選項，如下圖所示：
Ruby安裝完成後，在開始菜單中找到新安裝的Ruby，並啟動Ruby的Command控制面板，如下圖所示：
在啟動的Ruby命令控制面板中輸入下面的命令：
gem install sass
輸入上面命令，回車後就會自動安裝Sass：
這樣Sass就安裝成功了，也就可以使用了。
2.LESS的安裝
LESS的安裝和Sass安裝有所不同，他不需要依賴於Ruby環境，就能直接安裝使用。不過LESS安裝分為兩種：客戶端和服務器端安裝。
a)客戶端安裝：
我們可以直接在客戶端使用“.less”（LESS源文件），只需要在官網載壹個Javascript腳本文件主“less.js”，然後在我們需要引入LESS源文件的HTML的<head>中加入如下代碼：
<link rel="stylesheet/less" type="text/css" href="文件路徑/styles.less"><script src="文件路徑/less.js" type="text/javascript"></script>
需要註意的是：在引入“.less”文件中，“link”的“rel”屬性要設置為“stylesheet/less”。還有更重要的壹點需要註意的是：LESS源文件壹定要在“less.js”引入之前引入，這樣才能保證LESS源文件正確編譯解析。
b)服務器端安裝
LESS在服務器端的使用主要是借助於LESS的編譯器，將LESS源文件編譯生成最終的CSS文件，目前常用的方式是利用node的包管理器（npm）安裝LESS，安裝成功後就可以在Node環境中對LESS文件進行編譯。如此壹來，LESS在服務器的安裝和Sass的安裝有點相似，不同之處是他們需依賴的環境不壹樣，LESS需要的是Node JS環境，而Sass需要的是Ruby環境，為了讓大家能更清晰的知道如何在服務器端安裝LESS，此處簡單的過壹下安裝過程（本文演示的是在Window7下的安裝方法）。
首先到Node Js的官網下載壹個適合Windows系統的安裝文件，此處下載的是“node-v0.8.20-x86.msi”：
安裝文件下載後，按正常應用程序方法壹樣安裝。安裝完成後在開始菜單中啟用Node js的Command控制面板：
在啟動的Node Js的Command控制面板直接輸入下面的命令：
$ npm install less
這樣就安裝完LESS的編譯命令，可以在本地正常編譯LESS源文件。如果您想下載最新穩定版本的LESS，還可以嘗試在Node JS的Command控制面板輸入：
$ npm install less@latest
3.Stylus的安裝
Stylus的安裝和LESS在服務器端的安裝很相似，同樣依賴於Node JS的環境，也就是說也要先安裝Node Js（如果安裝Node JS請參考前面的介紹）。唯壹不同的是在Node JS的Command控制面板輸入的命令不壹樣：
$ npm install stylus
然後，就會自動下載安裝最新的stylus庫：
這樣就算是安裝完Stylus了，也可以正常使用Stylus。
四、Sass、LESS和Stylus轉譯成CSS
Sass、LESS和Stylus源文件（除了LESS源文件在客戶端下運行之外）都不能直接被瀏覽器直接識別，這樣壹來，要正常的使用這些源文件，就需要將其源文件轉譯成瀏覽器可以識別的CSS樣式文件，這也是使用CSS預處理器很關鍵的壹步，如果這壹步不知道如何操作，那麽意味著寫出來的代碼不可用。接下來按同樣的方式，分別來看看三者之間是如何將其源文件轉譯成所需要的CSS樣式文件。
1.Sass源文件轉譯成CSS文件
Sass文件就是普通的文本文件，不過其文件後綴名有兩種，壹種為“.sass”；另壹種為“.scss”。我們壹般用“.scss”就好，至於這兩種文件擴展名的區別在於“.sass”是Sass語言文件的擴展後綴名，而“.scss”是SCSS語言文件的擴展後綴名，至於Sass和SCSS的詳細區別這裏不做介紹。妳可以簡單的理解為他們都是CSS預處理器語言，而且兩者功能特性都壹樣，只是書寫規則不同而以。
要轉譯Sass文件的前提是有文件可轉，因此先在項目中創建壹個Sass文件，此例中將其命名為“style.scss”，並且將其放在對應的項目樣式中，如D盤的“www/workspace/Sass/css”目錄下。
啟動Ruby的Command控制面板，找到需要轉譯的Sass文件，如此例此文件放置在D盤的“www/workspace/Sass/css”目錄下：
如果僅針對於單文件的轉譯，需要將“style.scss”轉譯成“style.css”，只需要在對應的目錄下輸入下面的命令：
$ sass style.scss style.css
這樣原本在D盤的“www/workspace/Sass/css”目錄下只有“style.scss”這個文件，現在增加了壹個“style.css”文件，而這個CSS文件我們就可以用來調用，他也就是“style.scss”轉譯出來的樣式文件。
當然，我們不可能每保存壹次這個Sass文件就來執行壹回這個轉譯命令。那麽有沒有更好的辦法實現呢？回答是肯定的，可以通過下面的監聽命令實現，這樣壹來只要Sass文件做了修改，就會自動更新對應的CSS樣式文件。
單文件的監聽，只需要在剛才的命令控制面板中輸入：
$ sass --watch style.scss:style.css
按下回車鍵（Enter）,就會看到下面的提示信息：
看到上圖所示的提示信息就表示監聽成功，這樣壹來，妳只要修改了“style.scss”文件，“style.css”文件就會隨著更新變化。
對於壹個項目而言，不太可能只有壹個CSS樣式文件，如果有多個Sass文件需要監聽時，就很有必要的組織壹下。默認情況之下，我喜歡把所有的Sass文件放在“/css/sass”目錄中，而生成的CSS文件則直接放在“/css”目錄下。現在我們修改壹下項目文件目錄結構，在“/css”目錄中再創建壹個“sass”目錄，並找剛才創建的“style.scss”文件移至“/css/sass”目錄下。此時監聽“css/sass”下的所有Sass文件時，可以在命令面板中輸入如下格式的命令：
$ sass --watch sassFileDirectory:cssFileDirectory
在本例中，冒號前面的“sassFileDirectory”是指“/css/sass”下的“sass”目錄，冒號後面的“cssFileDirectory”是指“css”目錄，對應的命令就是：
$ sass --watch css/sass:css
回車後，同樣可以得到提示信息：
除了使用Ruby的Command控制面板轉譯Sass之外還可以考慮第三方工具，比如說有名的Compass.app和fire.app。
2.LESS文件的轉譯成CSS文件
LESS文件的轉譯和Sass文件轉譯可以說是大同小異，不同之處是LESS在安裝的Node JS環境下通過其自己的命令來進行轉譯。
$ lessc style.less
上面的命令會將編譯的CSS傳遞給stdout，妳可以將它保存到壹個文件中：
$ lessc style.less > style.css
除了上面的命令轉譯LESS源文件之外，現在還有很多第三方開發的工具，比較常見的有：SimpleLess、Less.app、LESS編譯輔助腳本-LESS2CSS、WinLess和CodeKit.app等，我個人現在常用的是WinLess工具，簡單易用，不過在IOS系統下LESS.app和CodeKit.app很好用。
3.Stylus源文件轉譯成CSS文件
Stylus具有可執行性，因此Stylus能將自身轉換成CSS。Stylus可以讀取自“stdin”輸出到“stdout”，因此Stylus可以像下面轉譯源文件：
$ stylus –compress ?<some.styl> some.css
Stylus也像Sass壹樣，同時接受單個文件和整個目錄的轉譯。例如，壹個目錄名為“css”將在同壹個目錄編譯並輸出“.css”文件。
$ stylus css
下面的命令將輸出到“./public/stylesheets”：
$ stylus css –out public/stylesheets
還可以同時轉譯多個文件：
$ stylus one.styl two.styl
如果妳的瀏覽器安裝了Firebug，那麽可以使用FireStylus擴展。
$ stylus –firebug ?<path>
五、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)