CSS中的預處理器是什么

CSS 預處理器是什么？一般來說，它們基于 CSS 擴展了一套屬于自己的 DSL（Domain Specific Language），來解決我們書寫 CSS 時難以解決的問題：

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

歸結起來就是抽象能力。所以這就決定了 CSS 預處理器的主要目標：提供 CSS 缺失的樣式層復用機制、減少冗余代碼，提高樣式代碼的可維護性。這不是錦上添花，而恰恰是雪中送炭。

但是，CSS 預處理器也不是萬金油，CSS 的好處在于簡便、隨時隨地被使用和調試。預編譯 CSS 步驟的加入，讓我們開發工作流中多了一個環節，調試也變得更麻煩了。更大的問題在于，預編譯很容易造成后代選擇器的濫用。所以在使用 CSS 預處理器時，要注意避免出現此類問題。

Sass 中變量以 $ 打頭比較不容易和 CSS 標準語法沖突。Less 中變量則以 @ 打頭，雖說容易和后續規范更新的新語法沖突，但是理論上只要 CSS 規范不引入 @a: b 這樣的規則，問題也不大。而且規范制定的時候也會參考很多現有的實現。

Sass 和 Less 的變量機制有很大的不同，Sass 是類似 JS 的塊級作用域一樣，可以在作用域內重新賦值而不影響外部，Less 是以全局的最后一次賦值為準。SASS 和 SCSS 只是兩種語法風格而已，SCSS 更貼近 CSS 語法，前端寫起來更舒服。Less 和 Sass 最常用的部分并沒有明顯的區別，不用太在意該用哪個，Just pick one。至于公司用哪個，跟著用就行，不出大問題不用考慮換。

文件切分

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

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

模塊化

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

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

以下是一個簡單的示例：

entry.less
 ├─ base.less
 │   ├─ normalize.less
 │   └─ reset.less
 ├─ layout.less
 │   ├─ header.less
 │   │   └─ nav.less
 │   └─ footer.less
 ├─ section-foo.less
 ├─ section-bar.less
 └─ ...復制代碼

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

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

選擇器嵌套

選擇符嵌套是文件內部的代碼組織方式，它可以讓一系列相關的規則呈現出層級關系。

變量

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

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

變量讓開發者更容易實現網站視覺風格的統一，也讓“換膚”這樣的需求變得更加輕松易行。

運算

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

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

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

大家可以發現，我們只能用注釋來表達 max-height 的值是怎么來的，而且注釋中 3 這樣的值也是幻數，還需要進一步解釋。未來當行高或行數發生變化的時候，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')復制代碼

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

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

$line-height = 1.5  // 全局統一行高

body
	line-height: $line-height

.wrapper
	$max-lines = 3

	max-height: unit($line-height * $max-lines, 'em')
	overflow-y: hidden復制代碼

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

函數

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

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

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

.button {	background-color: #ff4466;
}.button:hover {	background-color: #f57900;
}復制代碼

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

.button
	$color = #ff9833

	background-color: $color
	&:hover
		background-color: darken($color, 20%)復制代碼

此外，預處理器的函數往往還支持默認參數、具名實參、arguments 對象等高級功能，內部還可以設置條件分支，可以滿足復雜的邏輯需求。

Mixin

Mixin 是 CSS 預處理器提供的又一項實用功能。Mixin 的形態和用法跟函數十分類似——先定義，然后在需要的地方調用，在調用時可以接受參數。它與函數的不同之處在于，函數用于產生一個值，而 Mixin 的作用是產生一段 CSS 代碼。

Mixin 可以產生多條 CSS 規則，也可以只產生一些 CSS 聲明。

一般來說，Mixin 可以把 CSS 文件中類似的代碼塊抽象出來，并給它一個直觀的名字。比如 CSS 框架可以把一些常用的代碼片斷包裝為 mixin 備用，在內部按需調用，或暴露給使用者在業務層調用。

舉個例子，我們經常會用到 clearfix 來閉合浮動。在原生 CSS 中，如果要避免 clearfix 代碼的重復，往往只能先定義好一個 .clearfix 類，然后在 HTML 中掛載到需要的元素身上：

/* 為 clearfix 定義一個類 */
.clearfix {...}
.clearfix::after {...}復制代碼

<!-- 掛載到這兩個元素身上 --><p class="info clearfix">...</p>...<footer class="clearfix">...</footer>復制代碼

把表現層的實現暴露到了結構層，是不是很不爽？而在預處理器中，我們還可以選擇另一種重用方式：

// 為 clearfix 定義一個 mixin
clearfix()
    ...
    &::after
        ...

// 在需要的元素身上調用
.info
    clearfix()

footer
    clearfix()復制代碼

工程化

CSS 預處理語言無法直接運行于瀏覽器環境，這意味著我們編寫的源碼需要編譯為 CSS 代碼之后才能用于網頁。這似乎是一個門檻，需要我們付出“額外”的成本。

但在目前的大環境下，大多數項目的前端開發流程已經包含了構建環節，比如選擇任何一個腳本模塊化方案都是需要在部署時走一道打包程序的。所以對大多數團隊來說，這個門檻其實已經跨過去一大半了。

而一旦接受了這種設定，我們還可以享受到“額外”的福利。在給 CSS 的開發加入編譯環節的同時，還可以順道加入其它構建環節，比如代碼校驗、代碼壓縮、代碼后處理等等。

“代碼后處理”是指 PostCSS 平臺上各類插件所提供的功能，光是 Autoprefixer 這一項就已經值回票價了。我們再也不需要在 CSS 代碼中手工添加瀏覽器前綴了，直接使用標準寫法，剩下的事情讓工具搞定吧！

以上就是CSS 預處理器的詳細內容，更多請關注億速云其它相關文章！