相信前端開發人員對於CSS（Cascading Style Sheet-級聯樣式表）這種“面向命名語言”，一定非常熟悉。你可能在某個舍友熟睡的深夜，還在電腦面前被 css 繁重、冗雜的樣式，折磨的死去活來。

我們曾經面對 css 很多令人髮指的不友好特性，也因為 css 的低複用性而刀耕火種。

為了擺脫這樣的苦惱，CSS預處理器因此而誕生。

概念

CSS 預處理器用一種專門的編程語言，進行 Web 頁面樣式設計，然後再編譯成正常的 CSS 文件，以供項目使用。CSS 預處理器為 CSS 增加一些編程的特性，無需考慮瀏覽器的兼容性問題。

理由

1. CSS語法不夠強大，比如無法嵌套書寫導致模塊化開發中需要書寫很多重複的選擇器；
2. 沒有變量和合理的樣式複用機制，使得邏輯上相關的屬性值必須以字面量的形式重複輸出，導致難以維護等

看到這裡很多小夥伴就要問了，到底有哪些主流的預處理器呢？

Sass：2007年誕生，最早也是最成熟的CSS預處理器，擁有ruby社區的支持和compass這一最強大的css框架，目前受LESS影響，已經進化到了全面兼容CSS的SCSS。

Less：2009年出現，受SASS的影響較大，在ruby社區之外支持者遠超過SASS，其缺點是比起SASS來，可編程功能不夠，不過優點是簡單和兼容CSS。著名的Twitter Bootstrap就是採用LESS做底層語言的。

Stylus：2010年產生，來自Node.js社區，主要用來給Node項目進行CSS預處理支持，在此社區之內有一定支持者，在廣泛的意義上人氣還完全不如SASS和LESS。

那這些預處理器有哪些相似之處呢？

相同點

可以在 CSS 中使用變量、簡單的程序邏輯、函數等等在編程語言中的一些基本技巧，可以讓你的 CSS 更見簡潔，適應性更強，代碼更直觀等。

不同點

1.變量：

• Sass聲明變量必須是“$”開頭，後面緊跟變量名和變量值，而且變量名和變量值需要使用冒號：分隔開。
• Less 聲明變量用“Sass聲明變量必須是“$”開頭，後面緊跟變量名和變量值，而且變量名和變量值需要使用冒號：分隔開。
• Less 聲明變量用“@”法和Less、Sass完全相同。

2.作用域：

css 預編譯器把變量賦予作用域，也就是存在生命週期。就像 js 一樣，它會先從局部作用域查找變量，依次向上級作用域查找。

• Sass：三者最差，不存在全局變量的概念。
• Less：我認為跟 JS 一樣，逐級查找，向上冒泡。
• Stylus：完全等同 Less。Stylus 和 Sass 則更傾向於指令式。

3.嵌套：

十分真誠的說，三種 css 預編譯器的選擇器嵌套在使用上來說沒有任何區別（也可能是我沒發現）。Sass 除了常規的採用“&”替代父級選擇器之外，還提供了奇葩的屬性嵌套：

<code>/*style.sass*/.footer {  font: {    family:  微軟雅黑;    size: 5rem;    weight: bolder;  }}/<code>

4.繼承：

css 屬性的繼承是一個非常重要的特性，好消息是三種預編譯器都對此做出了改善。

• Sass和Stylus的繼承非常像，能把一個選擇器的所有樣式繼承到另一個選擇器上。使用“@extend”開始，後面接被繼承的選擇器。

<code>.shit {  margin: 10px 5px;  padding: 2px;}p {  @extend .shit;/*繼承.block*/  border: 1px solid #aaa;}ul,li {  @extend .shit; /*繼承.block*/  color: #aaa;}/<code> 

將被編譯成標準 css：

<code>.shit,p,ul,ol {  margin: 10px 5px;  padding:2px;}p {  border: 1px solid #aaa}ul,li {  color:#aaa;}/<code>

• Less 繼承：與前兩者繼承方式有所區別，它不是在選擇器上繼承，而是將Mixins中的樣式嵌套到每個選擇器裡面。然而這樣會帶來一個明顯的缺點：每個選擇器中會出現重複的樣式。

5.導入@Import：

CSS中，不建議用@import導入css，因為會增加http請求。但 CSS 預處理器中的導入和CSS的有hhe很大區別，它是將不同 css 是在語義上導入，最終編譯結果會生成一個CSS文件。

值得注意的是，如果不同文件相互引入的時候，出現相同變量名時可能會引起錯誤。所以我的建議是單獨有一個 var.sass/less/styl 文件來記錄所有你定義的變量。

Less 為@Import 擴展了語法，而 Sass 和 Stylus 並沒有。

使用

目前各大前端框架都已支持當下主流的預編譯器，只需要根據文檔添加配置即可；此外也可以利用webpack去配置使用（想了解webpack相關內容，可持續關注“一郭鮮”）。

總結

還沒嘗試的小夥伴抓緊時間行動起來吧，各款預處理器任你挑選，總有一款適合你。

有任何問題歡迎在下方留言討論或私信我，關注公眾號“一郭鮮”，前端知識一網打盡

閱讀更多 一郭鮮 的文章

關鍵字: 電腦 設計 預處理