瞭解css的大家可能都知道，我們可以用它來寫網頁樣式，但是卻不能用它來程式設計。
在程式設計師眼裡，css是一件很麻煩的東西。

它沒有變數，也沒有條件語句，只是一行行單純的描述，寫起來相當費事。
所以，就有人就開始為css加入程式設計元素，然後就取個名字叫做"css前處理器"。


通俗的說，css前處理器定義了一種新的語言。

基本的思想是用一種專門的程式語言，開發者只需要使用這種語言進行編碼工作，減少枯燥無味的css程式碼的編寫過程的同時，它能讓你的css具備更加簡潔、適應性更強、可讀性更加、層級關係更加明顯、更易於程式碼的維護等諸多好處。

css前處理器種類繁多，本次小渡就以Sass、Less、Stylus進行比較。

Sass是一門高於css的元語言。

它能用來清晰地、結構化地描述檔案樣式，有著比普通css更加強大的功能。

Sass能夠提供更簡潔、更優雅的語法，同時提供多種功能來建立可維護和管理的樣式表。也就是我們上面說的一種前處理器語言，反正就是可以讓我們風騷的定義css。

Sass優缺點

它在css的語法基礎上增加了變數（variable）、巢狀（nestedrules）、混合（mixins)、匯入（inlineimports）等高階功能，這些拓展令css更加強大與優雅。

使用Sass以及Sass的樣式庫（如compass）可以更好地組織管理樣式檔案、以及更高效的開發專案。

缺點呢就是css的檔案體積和複雜度不可控、除錯難度增加、成本等。

Lesscss是一種動態樣式語言，屬於css預處理語言的一種，它使用類似css的語法，為css的賦予了動態語言的特性，如變數、繼承、運算、函式等，更方便css的編寫和維護。

Lesscss可以在多種語言、環境中使用，包括瀏覽器端、桌面客戶端、服務端。

Less優缺點

1.作為目前最流行的css前處理器之一的less，可謂是Sass最強勁的對手，誕生晚於Sass,但是受它的影響較大，又使用css的語法，讓大部分開發者和設計師更容易上手。

2.此外，less還可以提供變數和邏輯控制，例如一些通用的顏色值，圖片路徑等。使用變數的好處瞭解一下：多出利用和方便維護，只需要改變數值就行了。

3.Less還有合理的樣式複用機制，減少程式碼的冗餘以及提高程式碼的可維護性。

不過優勢雖多，也需花費一定時間去了解學習使用這個預處理，會使團隊協作的難度加大。

對於開發來說，css的弱點在於靜態化。我們需要一個真正能提高開發效率的工具，Less，Sass都在這方面做了一些貢獻。

誕生於2010年的Stylus來自Node.js社群，主要用來給Node專案進行css預處理支援，所以Stylus是一種新型語言，可以建立健壯的、動態的、富有表現力的css。

Stylus優缺點

作為比較年輕的新型語言，Stylus 可以以近似指令碼的方式去寫css程式碼，建立健壯的、動態的、富有表現力的css，預設使用 .styl 的作為副檔名，支援多樣性的css語法。

Stylus比Less更強大，而且基於nodejs比Sass更符合我們的思路。

1.它可以解決樣式覆寫的問題，尤其是mixin式複用；
2.可緩解多瀏覽器相容造成的冗餘；
3.使CSS開發更加靈活。

但是css的好處在於簡便、隨時隨地被使用和除錯，使用Stylus，增加了預編譯css的步驟，讓我們開發工作流中多了一個環節，除錯也多了個步驟。

而且儘管簡單易學但是還是需要一定的學習成本的，因此存在在開發過程增加步驟和增加學習成本的缺點。

/

通過對三種常用的前端前處理器進行總結分析，我們可以看出沒有一種工具可以在瞬息萬變的前端學習世界一枝獨秀。

現在css前處理器技術已經非常成熟，未來還會湧現越來越多的css前處理器框架，只有不斷學習，才能去適應更多簡潔直觀的框架技術。