CSS預處器的瞭解

到目前爲止，在衆多優秀的CSS預處理器語言中就屬Sass、LESS和Stylus最優秀，討論的也多，對比的也多。   

1.Sass背景介紹

Sass是對CSS（層疊樣式表）的語法的一種擴充，誕生於2007年，最先也是最成熟的一款CSS預處理器語言，它可使用變量、常量、嵌套、混入、函數等功能，能夠更有效有彈性的寫出CSS。Sass最後仍是會編譯出合法的CSS讓瀏覽器使用，也就是說它自己的語法並不太容易讓瀏覽器識別，由於它不是標準的CSS格式，在它的語法內部可使用動態變量等，因此它更像一種極簡單的動態語言。

其實如今的Sass已經有了兩套語法規則：一個依舊是用縮進做爲分隔符來區分代碼塊的；另外一套規則和CSS同樣採用了大括號（｛｝）做爲分隔符。後一種語法規則又名SCSS，在Sass3以後的版本都支持這種語法規則。

注：Sass官網地址：http://sass-lang.com

2.LESS的背景介紹

2009年開源的一個項目，受Sass的影響較大，但又使用CSS的語法，讓大部分開發者和設計師更容易上手。LESS提供了多種方式能平滑的將寫好的代碼轉化成標準的CSS代碼，在不少流行的框架和工具中已經能常常看到LESS的身影了（例如Twitter的Bootstrap框架就使用了LESS）。

根據維基百科上的介紹，其實LESS是Alexis Sellier受Sass的影響建立的一個開源項目。當時SASS採用了縮進做爲分隔符來區分代碼塊，而不是CSS中廣爲使用的大括號（｛｝）。爲了讓CSS現有的用戶使用起來更佳方便，Alexis開發了LESS並提供了相似CSS的書寫功能。

注：LESS的官網：http://lesscss.org

3.Stylus背景介紹

Stylus，2010年產生，來自於Node.js社區，主要用來給Node項目進行CSS預處理支持，在此社區以內有必定支持者，在普遍的意義上人氣還徹底不如Sass和LESS。

Stylus被稱爲是一種革命性的新語言，提供一個高效、動態、和使用表達方式來生成CSS，以供瀏覽器使用。Stylus同時支持縮進和CSS常規樣式書寫規則。

注：Stylus官網：http://learnboost.github.com/stylus

Sass、LESS和Stylus轉譯成CSS

Sass、LESS和Stylus源文件（除了LESS源文件在客戶端下運行以外）都不能直接被瀏覽器直接識別，這樣一來，要正常的使用這些源文件，就須要將其源文件轉譯成瀏覽器能夠識別的CSS樣式文件，這也是使用CSS預處理器很關鍵的一步，若是這一步不知道如何操做，那麼意味着寫出來的代碼不可用。   

 

Sass、LESS和Stylus特性

這三款CSS預處理器語言具備一些相同的特性，例如：變量、混入、嵌套、函數等。在這一節中，咱們依次來對比一下這三款CSS預處理器語言各類特性的異同之處，以及使用方法。

 

綜上所述，咱們對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的問題。能夠CSS應該面臨的問題一個也少不了，只是增長了一個編譯過程而已，簡單來講CSS預處理器語言較CSS玩法變得更高級了，但同時下降了本身對最終代碼的控制力。更致命的是提升了門檻，首先是上手門檻，其次是維護門檻，再來是團隊總體水平和規範的門檻。這也形成了初學學習成本的昂貴。