CSS預處理器—Sass、LESS和Stylus

http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html

1、什麼是CSS預處器

CSS預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，爲CSS增長了一些編程的特性，將CSS做爲目標生成文件，而後開發者就只要使用這種語言進行編碼工做。通俗的說，CSS預處理器用一種專門的編程語言，進行Web頁面樣式設計，而後再編譯成正常的CSS文件，以供項目使用。CSS預處理器爲CSS增長一些編程的特性，無需考慮瀏覽器的兼容性問題，例如你能夠在CSS中使用變量、簡單的邏輯程序、函數等等在編程語言中的一些基本特性，可讓你的CSS更加簡潔、適應性更強、可讀性更佳，更易於代碼的維護等諸多好處。

 

2、Sass、LESS和Stylus背景介紹

爲了能更好的瞭解這三款流行的CSS預處理器，咱們先從其背景入手，簡單的瞭解一下各自的背景信息。

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作一個簡單的對比總結：

• 三者都是開源項目；
• 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玩法變得更高級了，但同時下降了本身對最終代碼的控制力。更致命的是提升了門檻，首先是上手門檻，其次是維護門檻，再來是團隊總體水平和規範的門檻。這也形成了初學學習成本的昂貴。