相信前端開發(fā)人員對于CSS（Cascading Style Sheet-級聯(lián)樣式表）這種“面向命名語言”军浆，一定非常熟悉棕洋。你可能在某個舍友熟睡的深夜，還在電腦面前被 css 繁重乒融、冗雜的樣式掰盘，折磨的死去活來。
我們曾經(jīng)面對 css 很多令人發(fā)指的不友好特性赞季，也因為 css 的低復(fù)用性而刀耕火種庆杜。
為了擺脫這樣的苦惱，CSS預(yù)處理器因此而誕生碟摆。
概念
CSS 預(yù)處理器用一種專門的編程語言晃财，進(jìn)行 Web 頁面樣式設(shè)計，然后再編譯成正常的 CSS 文件典蜕，以供項目使用断盛。CSS 預(yù)處理器為 CSS 增加一些編程的特性蔚舀，無需考慮瀏覽器的兼容性問題抖仅。
理由
- CSS語法不夠強(qiáng)大笨使，比如無法嵌套書寫導(dǎo)致模塊化開發(fā)中需要書寫很多重復(fù)的選擇器嗜憔；
- 沒有變量和合理的樣式復(fù)用機(jī)制邢锯，使得邏輯上相關(guān)的屬性值必須以字面量的形式重復(fù)輸出呜象，導(dǎo)致難以維護(hù)等
看到這里很多小伙伴就要問了呼寸，到底有哪些主流的預(yù)處理器呢稳捆？
Sass：2007年誕生火的，最早也是最成熟的CSS預(yù)處理器壶愤，擁有ruby社區(qū)的支持和compass這一最強(qiáng)大的css框架，目前受LESS影響馏鹤，已經(jīng)進(jìn)化到了全面兼容CSS的SCSS征椒。
Less：2009年出現(xiàn)，受SASS的影響較大湃累，在ruby社區(qū)之外支持者遠(yuǎn)超過SASS勃救，其缺點是比起SASS來碍讨，可編程功能不夠，不過優(yōu)點是簡單和兼容CSS蒙秒。著名的Twitter Bootstrap就是采用LESS做底層語言的勃黍。
Stylus：2010年產(chǎn)生，來自Node.js社區(qū)晕讲，主要用來給Node項目進(jìn)行CSS預(yù)處理支持覆获，在此社區(qū)之內(nèi)有一定支持者，在廣泛的意義上人氣還完全不如SASS和LESS益兄。
那這些預(yù)處理器有哪些相似之處呢锻梳？
相同點
可以在 CSS 中使用變量、簡單的程序邏輯净捅、函數(shù)等等在編程語言中的一些基本技巧疑枯，可以讓你的 CSS 更見簡潔，適應(yīng)性更強(qiáng)蛔六，代碼更直觀等荆永。
不同點
1.變量：
- Sass聲明變量必須是“$”開頭，后面緊跟變量名和變量值国章，而且變量名和變量值需要使用冒號：分隔開具钥。
- Less 聲明變量用“Sass聲明變量必須是“$”開頭，后面緊跟變量名和變量值液兽，而且變量名和變量值需要使用冒號：分隔開骂删。
- Less 聲明變量用“@”法和Less、Sass完全相同四啰。
2.作用域：
css 預(yù)編譯器把變量賦予作用域宁玫，也就是存在生命周期。就像 js 一樣柑晒，它會先從局部作用域查找變量欧瘪，依次向上級作用域查找。
- Sass：三者最差匙赞，不存在全局變量的概念佛掖。
- Less：我認(rèn)為跟 JS 一樣，逐級查找涌庭，向上冒泡芥被。
- Stylus：完全等同 Less。Stylus 和 Sass 則更傾向于指令式脾猛。
3.嵌套：
十分真誠的說撕彤，三種 css 預(yù)編譯器的選擇器嵌套在使用上來說沒有任何區(qū)別（也可能是我沒發(fā)現(xiàn)）。Sass 除了常規(guī)的采用“&”替代父級選擇器之外猛拴，還提供了奇葩的屬性嵌套：
/*style.sass*/
.footer {
font: {
family: 微軟雅黑;
size: 5rem;
weight: bolder;
}
}
4.繼承：
css 屬性的繼承是一個非常重要的特性羹铅，好消息是三種預(yù)編譯器都對此做出了改善。
- Sass和Stylus的繼承非常像愉昆，能把一個選擇器的所有樣式繼承到另一個選擇器上职员。使用“@extend”開始，后面接被繼承的選擇器跛溉。
.shit {
margin: 10px 5px;
padding: 2px;
}
p {
@extend .shit; /*繼承.block*/
border: 1px solid #aaa;
}
ul,li {
@extend .shit; /*繼承.block*/
color: #aaa;
}
將被編譯成標(biāo)準(zhǔn) css：
.shit,p,ul,ol {
margin: 10px 5px;
padding:2px;
}
p {
border: 1px solid #aaa
}
ul,li {
color:#aaa;
}
- Less 繼承：與前兩者繼承方式有所區(qū)別焊切，它不是在選擇器上繼承，而是將Mixins中的樣式嵌套到每個選擇器里面芳室。然而這樣會帶來一個明顯的缺點：每個選擇器中會出現(xiàn)重復(fù)的樣式专肪。
5.導(dǎo)入@Import：
CSS中，不建議用@import導(dǎo)入css堪侯，因為會增加http請求嚎尤。但 CSS 預(yù)處理器中的導(dǎo)入和CSS的有hhe很大區(qū)別，它是將不同 css 是在語義上導(dǎo)入伍宦，最終編譯結(jié)果會生成一個CSS文件芽死。
值得注意的是，如果不同文件相互引入的時候次洼，出現(xiàn)相同變量名時可能會引起錯誤关贵。所以我的建議是單獨有一個 var.sass/less/styl 文件來記錄所有你定義的變量。
Less 為@Import 擴(kuò)展了語法卖毁，而 Sass 和 Stylus 并沒有揖曾。
使用
目前各大前端框架都已支持當(dāng)下主流的預(yù)編譯器，只需要根據(jù)文檔添加配置即可亥啦；此外也可以利用webpack去配置使用（想了解webpack相關(guān)內(nèi)容炭剪，可持續(xù)關(guān)注“一郭鮮”）。
總結(jié)
- Sass和Less語法嚴(yán)謹(jǐn)禁悠、Stylus相對自由念祭。因為Less長得更像CSS，所以它可能學(xué)習(xí)起來更容易碍侦。* Sass 和 Compass粱坤、Stylus 和 Nib 都是好基友。* Sass 和 Stylus 都具有類語言的邏輯方式處理：條件瓷产、循環(huán)等站玄，而 Less 需要通過When等關(guān)鍵詞模擬這些功能，這方面 Less 比不上 Sass 和 Stylus濒旦。* Less 在豐富性以及特色上都不及 Sass 和 Stylus株旷，若不是因為 Bootstrap 引入了 Less，可能它不會像現(xiàn)在這樣被廣泛應(yīng)用（個人愚見）。
還沒嘗試的小伙伴抓緊時間行動起來吧晾剖，各款預(yù)處理器任你挑選锉矢，總有一款適合你。
有任何前端問題可以私信我齿尽，想了解更多前端知識歡迎關(guān)注公眾號“一郭鮮”沽损，小郭等著你的到來
