CSS 自誕生以來，基本語法和核心機制一直沒有本質(zhì)上的變化，它的發(fā)展幾乎全是表現(xiàn)力層面上的提升。最開始 CSS 在網(wǎng)頁中的作用只是輔助性的裝飾，輕便易學是最大的需求；然而如今網(wǎng)站的復雜度已經(jīng)不可同日而語，原生 CSS 已經(jīng)讓開發(fā)者力不從心。

當一門語言的能力不足而用戶的運行環(huán)境又不支持其它選擇的時候，這門語言就會淪為 “編譯目標” 語言。開發(fā)者將選擇另一門更高級的語言來進行開發(fā)，然后編譯到底層語言以便實際運行。

于是，在前端領(lǐng)域，天降大任于斯人也，CSS 預處理器應運而生。而 CSS 這門古老的語言以另一種方式 “重新適應” 了網(wǎng)頁開發(fā)的需求。

預處理器賦予我們的 “超能力”

---

簡單梳理一下，CSS 預處理器為我們帶來了幾項重要的能力，由淺入深排列如下。（不用在意你用到了多少，無論深淺，都是獲益。）

1.文件切分

頁面越來越復雜，需要加載的 CSS 文件也越來越大，我們有必要把大文件切分開來，否則難以維護。傳統(tǒng)的 CSS 文件切分方案基本上就是 CSS 原生的@import指令，或在 HTML 中加載多個 CSS 文件，這些方案通常不能滿足性能要求。

CSS 預處理器擴展了@import指令的能力，通過編譯環(huán)節(jié)將切分后的文件重新合并為一個大文件。這一方面解決了大文件不便維護的問題，另一方面也解決了一堆小文件在加載時的性能問題。

2.模塊化

把文件切分的思路再向前推進一步，就是 “模塊化”。一個大的 CSS 文件在合理切分之后，所產(chǎn)生的這些小文件的相互關(guān)系應該是一個樹形結(jié)構(gòu)。

樹形的根結(jié)節(jié)一般稱作 “入口文件”，樹形的其它節(jié)點一般稱作 “模塊文件”。入口文件通常會依賴多個模塊文件，各個模塊文件也可能會依賴其它更末端的模塊，從而構(gòu)成整個樹形。

以下是一個簡單的示例：

entry.styl ├─ base.styl │ ├─ normalize.styl │ └─ reset.styl ├─ layout.styl │ ├─ header.styl │ │ └─ nav.syl │ └─ footer.styl ├─ section-foo.styl ├─ section-bar.styl └─ ...

（入口文件entry.styl在編譯時會引入所需的模塊，生成entry.css，然后被頁面引用。）

如果你用過其它擁有模塊機制的編程語言，應該已經(jīng)深有體會，模塊化是一種非常好的代碼組織方式，是開發(fā)者設計代碼結(jié)構(gòu)的重要手段。模塊可以很清晰地實現(xiàn)代碼的分層、復用和依賴管理，讓 CSS 的開發(fā)過程也能享受到現(xiàn)代程序開發(fā)的便利。

3.選擇符嵌套

選擇符嵌套是文件內(nèi)部的代碼組織方式，它可以讓一系列相關(guān)的規(guī)則呈現(xiàn)出層級關(guān)系。在以前，如果要達到這個目的，我們只能這樣寫：

.nav{margin:auto/* 水平居中 */;1000px;color:#333;} .navli{float:left/* 水平排列 */;100px;} .navlia{display:block;text-decoration:none;}

這種寫法需要我們手工維護縮進關(guān)系，當上級選擇符發(fā)生變化時，所有相關(guān)的下級選擇符都要修改；此外，把每條規(guī)則寫成一行也不易閱讀，為單條聲明寫注釋也很尷尬（只能插在聲明之間了）。

在 CSS 預處理語言中，嵌套語法可以很容易地表達出規(guī)則之間的層級關(guān)系，為單條聲明寫注釋也很清晰易讀：

.nav margin: auto // 水平居中 1000px color: #333 li float: left // 水平排列 100px a display: block text-decoration: none

4.變量

在變更出現(xiàn)之前，CSS 中的所有屬性值都是 “幻數(shù)”。你不知道這個值是怎么來的、它的什么樣的意義。有了變量之后，我們就可以給這些 “幻數(shù)” 起個名字了，便于記憶、閱讀和理解。

接下來我們會發(fā)現(xiàn)，當某個特定的值在多處用到時，變量就是一種簡單而有效的抽象方式，可以把這種重復消滅掉，讓你的代碼更加 DRY。

我們來比較一下以下兩段代碼：

/* 原生 CSS 代碼 */ strong{ color:#ff4466; font-weight:bold; } /* ... */ .notice{ color:#ff4466; }

// 用 Stylus 來寫 $color-primary = #ff4466 strong color: $color-primary font-weight: bold /* ... */ .notice color: $color-primary

你可能已經(jīng)意識到了，變量讓開發(fā)者更容易實現(xiàn)網(wǎng)站視覺風格的統(tǒng)一，也讓 “換膚” 這樣的需求變得更加輕松易行。

5.運算

光有變量還是不夠的，我們還需要有運算。如果說變量讓值有了意義，那么運算則可以讓值和值建立關(guān)聯(lián)。有些屬性的值其實跟其它屬性的值是緊密相關(guān)的，CSS 語法無法表達這層關(guān)系；而在預處理語言中，我們可以用變量和表達式來呈現(xiàn)這種關(guān)系。

舉個例子，我們需要讓一個容器最多只顯示三行文字，在以前我們通常是這樣寫的：

.wrapper{ overflow-y:hidden; line-height:1.5; max-height:4.5em; /* = 1.5 x 3 */ }

大家可以發(fā)現(xiàn)，我們只能用注釋來表達max-height的值是怎么來的，而且注釋中3這樣的值也是幻數(shù)，還需要進一步解釋。未來當行高或行數(shù)發(fā)生變化的時候，max-height的值和注釋中的算式也需要同步更新，維護起來很不方便。

接下來我們用預處理語言來改良一下：

.wrapper $max-lines = 3 $line-height = 1.5 overflow-y: hidden line-height: $line-height max-height: unit($line-height * $max-lines, 'em')

乍一看，代碼行數(shù)似乎變多了，但代碼的意圖卻更加清楚了——不需要任何注釋就把整件事情說清楚了。在后期維護時，只要修改那兩個變量就可以了。

值得一提的是，這種寫法還帶來另一個好處。$line-height這個變量可以是.wrapper自己定義的局部變量（比如上面那段代碼），也可以從更上層的作用域獲?。?/p>

$line-height = 1.5 // 全局統(tǒng)一行高 body line-height: $line-height .wrapper $max-lines = 3 max-height: unit($line-height * $max-lines, 'em') overflow-y: hidden

這意味著.wrapper可以向祖先繼承行高，而不需要為這個 “只顯示三行” 的需求把自己的行高寫死。有了運算，我們就有能力表達屬性與屬性之間的關(guān)聯(lián)，它令我們的代碼更加靈活、更加 DRY。

6.函數(shù)

把常用的運算操作抽象出來，我們就得到了函數(shù)。

開發(fā)者可以自定義函數(shù)，預處理器自己也內(nèi)置了大量的函數(shù)。最常用的內(nèi)置函數(shù)應該就是顏色的運算函數(shù)了吧！有了它們，我們甚至都不需要打開 Photoshop 來調(diào)色，就可以得到某個顏色的同色系變種了。

舉個例子，我們要給一個按鈕添加鼠標懸停效果，而最簡單的懸停效果就是讓按鈕的顏色加深一些。我們寫出的 CSS 代碼可能是這樣的：

.button{ padding: 0px;">#ff4466; } .button:hover{ padding: 0px;">#f57900; }

我相信即使是最資深的視覺設計師，也很難分清#ff4466和#f57900這兩種顏色到底有什么關(guān)聯(lián)。而如果我們的代碼是用預處理語言來寫的，那事情就直觀多了：

.button $color = #ff9833 padding: 0px;"> &:hover color: rgb(73, 73, 73); font-family: Arial, Helvetica, sans-serif; background-color: rgb(244, 237, 227);">此外，預處理器的函數(shù)往往還支持默認參數(shù)、具名實參、arguments對象等高級功能，內(nèi)部還可以設置條件分支，可以滿足復雜的邏輯需求。 7.Mixin Mixin 是 CSS 預處理器提供的又一項實用功能。Mixin 的形態(tài)和用法跟函數(shù)十分類似——先定義，然后在需要的地方調(diào)用，在調(diào)用時可以接受參數(shù)。它與函數(shù)的不同之處在于，函數(shù)用于產(chǎn)生一個值，而 Mixin 的作用是產(chǎn)生一段 CSS 代碼。 Mixin 可以產(chǎn)生多條 CSS 規(guī)則，也可以只產(chǎn)生一些 CSS 聲明。 一般來說，Mixin 可以把 CSS 文件中類似的代碼塊抽象出來，并給它一個直觀的名字。比如 CSS 框架可以把一些常用的代碼片斷包裝為 mixin 備用，在內(nèi)部按需調(diào)用，或暴露給使用者在業(yè)務層調(diào)用。 舉個例子，我們經(jīng)常會用到clearfix來閉合浮動。在原生 CSS 中，如果要避免 clearfix 代碼的重復，往往只能先定義好一個.clearfix類，然后在 HTML 中掛載到需要的元素身上： /* 為 clearfix 定義一個類 */ .clearfix {...} .clearfix::after {...} <!-- 掛載到這兩個元素身上 --> <divclass="info clearfix">...</div> ... <footerclass="clearfix">...</footer> 把表現(xiàn)層的實現(xiàn)暴露到了結(jié)構(gòu)層，是不是很不爽？而在預處理器中，我們還可以選擇另一種重用方式： // 為 clearfix 定義一個 mixin clearfix() ... &::after ... // 在需要的元素身上調(diào)用 .info clearfix() footer clearfix() 8.工程化 CSS 預處理語言無法直接運行于瀏覽器環(huán)境，這意味著我們編寫的源碼需要編譯為 CSS 代碼之后才能用于網(wǎng)頁。這似乎是一個門檻，需要我們付出 “額外” 的成本。 但在目前的大環(huán)境下，大多數(shù)項目的前端開發(fā)流程已經(jīng)包含了構(gòu)建環(huán)節(jié)，比如選擇任何一個腳本模塊化方案都是需要在部署時走一道打包程序的。所以對大多數(shù)團隊來說，這個門檻其實已經(jīng)跨過去一大半了。 而一旦接受了這種設定，我們還可以享受到 “額外” 的福利。在給 CSS 的開發(fā)加入編譯環(huán)節(jié)的同時，還可以順道加入其它構(gòu)建環(huán)節(jié)，比如代碼校驗、代碼壓縮、代碼后處理等等。 “代碼后處理” 是指 PostCSS 平臺上各類插件所提供的功能，光是 Autoprefixer 這一項就已經(jīng)值回票價了。我們再也不需要在 CSS 代碼中手工添加瀏覽器前綴了，直接使用標準寫法，剩下的事情讓工具搞定吧！

總結(jié)

以上是生活随笔為你收集整理的浅谈 CSS 预处理器： 为什么要使用预处理器？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。