為了簡(jiǎn)化樣式的描述，瀏覽器設(shè)計(jì)了 css 作為 DSL(領(lǐng)域特定語言)。css 寫起來簡(jiǎn)單，但在很多方面都不太方便，比如不支持嵌套，代碼比較冗余;不支持繼承和混合，代碼不好復(fù)用等。

為了給 css 擴(kuò)展代碼組織和動(dòng)態(tài)計(jì)算的能力，社區(qū)出現(xiàn)了一些編譯為 css 的預(yù)處理語言，比如 sass、less、stylus 等。

此外，還有 postcss 這種后處理器，它是從 css 編譯到 css，編譯的過程中做各種分析和轉(zhuǎn)換。

less、stylus 的編譯器都是 js 寫的，而 sass 就比較特殊了，3 代編譯器都不是 js 寫的。

今天，我們就來聊下 sass 的歷史：sass 的 3 代編譯器。

ruby sass

sass 最早是 2006 年由 ruby 開發(fā)的，作為和它 web 框架的模版引擎 haml 配套的編寫 css 的語言。因?yàn)楸容^好用，所以前端也都在用。

sass 編譯器是用 ruby 開發(fā)的，而 ruby 是一門解釋型語言，所以前端開發(fā)想編譯 sass 就需要在本地安裝 ruby。

后來，Node.js 的出現(xiàn)推動(dòng)了前端工程化的發(fā)展，也就是用 Node.js 來寫前端用的編譯打包等工具鏈。而 Node.js 只支持 c++ 這種編譯型語言的擴(kuò)展包，ruby sass 就用不了了，所以出現(xiàn)了 node-sass。

直到 2019 年 3 月，ruby sass 宣布不再維護(hù)，sass 最早的編譯器退出歷史舞臺(tái)。

node-sass

里用 c++ 實(shí)現(xiàn)了 sass 的編譯器，叫做 LibSass，和 node 做了集成，就是 node-sass 這個(gè)包。

當(dāng)然，它同樣也可以和別的語言集成，比如 go、java 等。

node-sass 讓我們可以在 Node.js 里通過 api 來編譯 sass 代碼，順應(yīng)了前端工程化的大潮流。

而且 node-sass 是用 c++ 寫的，編譯速度比 ruby sass 快很多。

只不過，node-sass 因?yàn)槭且粋€(gè) c++ 模塊，所以安裝的時(shí)候要和 node 版本對(duì)應(yīng)，不然就會(huì)編譯報(bào)錯(cuò)，這點(diǎn)比較麻煩。

在 github 可以查到 node 和 node-sass 的版本對(duì)應(yīng)關(guān)系： 

node-sass 看起來挺不錯(cuò)，編譯速度快，支持 Node.js 調(diào)用。雖然要注意下和 node 版本的對(duì)應(yīng)關(guān)系，但問題不大。

但是，node-sass 已經(jīng)被標(biāo)記為過時(shí)了，這意味著它也會(huì)慢慢退出歷史舞臺(tái)。

為什么呢?

主要是因?yàn)榫S護(hù)速度跟不上了。

就像 TS 是 JS 的超集一樣，SASS 也是 CSS 的超集。超集意味著 TS Compiler 要支持 JS 的各種新語法，SASS 也要支持 CSS 的各種新語法，在這個(gè)基礎(chǔ)上再迭代自己添加的那些語法。

SASS 團(tuán)隊(duì)的兩個(gè)主要維護(hù)者感覺自己支持 CSS 新特性的速度跟不上了，而且社區(qū)出現(xiàn)了 dart-sass 這個(gè)對(duì) css 新特性支持更好的 sass 編譯器，隨著時(shí)間的推移，CSS 新特性支持上差距越來越大。最終，在 2020 年 10 月份，node-sass 宣布了不再繼續(xù)支持新特性，標(biāo)記為了過時(shí)，推薦使用 dart-sass。

在 node-sass 博客上有這樣一段話，展示了他們的無奈：

經(jīng)過 Sass 核心團(tuán)隊(duì)的多次討論，我們得出的結(jié)論是，是時(shí)候正式宣布 LibSass 和基于它構(gòu)建的包(包括 Node Sass)已被棄用。幾年來，很明顯 LibSass 背后根本沒有足夠的工程帶寬來使其與 Sass 語言的最新發(fā)展保持同步(例如，最新的新語言功能是在2018 年 11 月添加的)。盡管我們希望看到這種模式發(fā)生轉(zhuǎn)變，但即使是長(zhǎng)期 LibSass 貢獻(xiàn)者 Michael Mifsud 和 Marcel Greter 的出色工作也無法跟上CSS和 Sass語言開發(fā)的快速步伐。

就這樣，node-sass 也算是推出了歷史舞臺(tái)，但是它對(duì)前端工程化的貢獻(xiàn)是不可磨滅的。

我們?cè)賮砜聪?sass 編譯器的繼任者：dart-sass。

dart-sass

dart-sass 毫無疑問是用 dart 來寫的 sass 編譯器。dart 是 flutter 的編程語言，可以編譯為 js，所以它提供的 npm 是 js 的，不需要像 node-sass 一樣和 node 版本有綁定關(guān)系。

下載后的 npm 包可以看到 一個(gè) sass.dart.js，這個(gè)就是用 dart 編譯出來的：

因?yàn)?dart-sass 的 npm 包的編譯是用 js 做的，速度上會(huì)比 node-sass 慢，但是它主要?jiǎng)僭趯?duì) css 的特性支持的全，而且因?yàn)槭? js 包，安裝很方便。

dart-sass 代表著未來，也是被官方推薦的 sass 編譯器。

三代 sass 編譯器

介紹完了三代編譯器，我們來簡(jiǎn)單做下回顧：

ruby sass 是最早的 sass 編譯器，用 ruby 寫的，所以不能被 node 調(diào)用，但是它是開創(chuàng)者，歷史功績(jī)列第一位。只是需要安裝 ruby 來執(zhí)行，比較麻煩。

node-sass 是順應(yīng)前端工程化潮流而出現(xiàn)的 node 包，是對(duì)用 c++ 實(shí)現(xiàn)的 sass 編譯器 LibSass 的封裝。因?yàn)橛?c++ 編譯，所以速度更快。提供了 Node.js 的 api，支撐了前端工程化的大潮流。歷史功績(jī)列第二位。只是需要 node-sass 和 node 版本的對(duì)應(yīng)比較麻煩。

dart-sass 是用 dart 實(shí)現(xiàn)的 sass 編譯器，提供的 dart-sass 的包是 js 的，由 dart 編譯而來。好處是對(duì) css 新特性支持的更全，而且也沒有和 node 版本的綁定關(guān)系。

ruby sass 和 node-sass 都已經(jīng)是歷史，dart-sass 是 sass 編譯器的未來。

總結(jié)

css 缺少代碼組織能力和動(dòng)態(tài)計(jì)算能力，所以社區(qū)出現(xiàn)了一些 css 預(yù)處理器：sass、less、stylus。

less、stylus 的編譯器都是 js 寫的，最特殊的是 sass，它的三代編譯器分別是 ruby、c++、dart 寫的，都不是 js。(這點(diǎn)在工程化領(lǐng)域也很特殊，js 的編譯器都是從 js 逐步發(fā)展到 rust、go 等別的語言，而 sass 的編譯器是從別的語言慢慢切回到了編譯成 js 的語言)

ruby sass、node-sass 都已經(jīng)過時(shí)了，但是它們對(duì)前端工程化的貢獻(xiàn)不可磨滅，dart-sass 代表著 sass 編譯器的未來，希望它能接過前輩們的接力棒，繼往開來，做的更好吧。