時間：2016-11-18 10:33:40
原文地址：《再談 CSS 預(yù)處理器》
這個是目前看過文章中，最完整詳細(xì)的介紹了 less, sass ,stylus 三者的異同點(diǎn)，因此在此記錄下。
Less， Sass， Stylus 功能上 大體相同， 具體喜歡用哪一個，或者一個都不用， 這個看個人喜好。
詳細(xì)請看原文
CSS預(yù)處理器是什么？
CSS 預(yù)處理器是什么？一般來說，它們基于 CSS 擴(kuò)展了一套屬于自己的 DSL，來解決我們書寫 CSS 時難以解決的問題：
- 語法不夠強(qiáng)大，比如無法嵌套書寫導(dǎo)致模塊化開發(fā)中需要書寫很多重復(fù)的選擇器；
- 沒有變量和合理的樣式復(fù)用機(jī)制，使得邏輯上相關(guān)的屬性值必須以字面量的形式重復(fù)輸出，導(dǎo)致難以維護(hù)。
所以這就決定了 CSS 預(yù)處理器的主要目標(biāo)：提供 CSS 缺失的樣式層復(fù)用機(jī)制、減少冗余代碼，提高樣式代碼的可維護(hù)性。這不是錦上添花，而恰恰是雪中送炭。
目前最主流的三個預(yù)處理器 Less、Sass 和 Stylus（按字母順序排名）
總結(jié)
我（原文作者）個人認(rèn)為，Less 從語言特性的設(shè)計(jì)到功能的健壯程度和另外兩者相比都有一些缺陷，但因?yàn)?Bootstrap 引入了 Less，導(dǎo)致 Less 在今天還是有很多用戶。用 Less 可以滿足大多數(shù)場景的需求，但相比另外兩者，基于 Less 開發(fā)類庫會復(fù)雜得多，實(shí)現(xiàn)的代碼會比較臟，能實(shí)現(xiàn)的功能也會受到 DSL 的制約。比 Stylus 語義更清晰、比 Sass 更接近 CSS 語法，使得剛剛轉(zhuǎn)用 CSS 預(yù)編譯的開發(fā)者能夠更平滑地進(jìn)行切換。當(dāng)初 Sass 并不支持 SCSS 語法，使得轉(zhuǎn)投 Sass 成本較高，所以 Alexis Sellier 才萌生開發(fā)一個更「CSS」的預(yù)處理器的念頭。大獲成功以后反過來影響到了 Sass，迫使其也支持類似 CSS 語法的 SCSS。另外，Less 支持瀏覽器端編譯，這無疑降低了開發(fā)門檻，使得很多非專業(yè)的開發(fā)者能夠更快地上手（對于一些個人項(xiàng)目來說，能讓項(xiàng)目跑起來就行，對前端的性能并沒有專業(yè)工程師那么高的要求）。
Sass 在三者之中歷史最久，也吸收了其他兩者的一些優(yōu)點(diǎn)。從功能上來說 Sass 大而全，語義明晰但是代碼很容易顯得累贅。主項(xiàng)目基于 Ruby 可能也是一部分人不選擇它的理由（Less 開始也是基于 Ruby 開發(fā)，后來逐漸轉(zhuǎn)到 less.js 項(xiàng)目中）。 Sass 有一個「事實(shí)標(biāo)準(zhǔn)」庫——Compass，于是對于很多開發(fā)者而言省去了選擇類庫的煩惱，對于提升開發(fā)效率也有不小的幫助。
Stylus 的語法非常靈活，很多語義都是根據(jù)上下文隱含的。基于 Stylus 可以寫出非常簡潔的代碼，但對使用團(tuán)隊(duì)的開發(fā)素養(yǎng)要求也更高，更需要有良好的開發(fā)規(guī)范或約定。Stylus 是前 Node.js 圈第一大神 TJ Holowaychuk 的作品，雖然他已經(jīng)棄坑了，但是仍然有不小的號召力。和 Sass 有 Compass 類似，Stylus 有一個官方開發(fā)的樣式庫 nib，同樣提供了不少好用的 mixin。對于比較有經(jīng)驗(yàn)的開發(fā)者，用 Stylus 可能更會有一種暢快的感覺?？偟膩碚f用一個詞形容 Stylus 的話，我會用「sexy」。
總的來說，三種預(yù)處理器百分之七八十的功能是類似的。Less 適合幫助團(tuán)隊(duì)更快地上手預(yù)處理代碼的開發(fā)，而 Sass 和 Stylus 的差異更在于口味。比如有的人喜歡 jQuery 用一個 $ 做大部分的事，而另一些人覺得不一樣的功能就該有明確的語義上的差別。在這里我不會做具體的推薦。當(dāng)然，再次聲明一下由于我個人接觸 Less 開發(fā)比較多，所以可能遇到的坑也多一些，文中沒有列出 Sass 和 Stylus 的問題并不代表他們沒有。
