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

為了給 css 擴展代碼組織和動態計算的能力，社區出現了一些編譯為 css 的預處理語言，比如 sass、less、stylus 等。

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

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

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

ruby sass

sass 最早是 2006 年由 ruby 開發的，作為和它 web 框架的模版引擎 haml 配套的編寫 css 的語言。因為比較好用，所以前端也都在用。

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

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

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

node-sass

里用 c++ 實現了 sass 的編譯器，叫做 LibSass，和 node 做了集成，就是 node-sass 這個包。

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

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

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

只不過，node-sass 因為是一個 c++ 模塊，所以安裝的時候要和 node 版本對應，不然就會編譯報錯，這點比較麻煩。

在 github 可以查到 node 和 node-sass 的版本對應關系：

node-sass 看起來挺不錯，編譯速度快，支持 Node.js 調用。雖然要注意下和 node 版本的對應關系，但問題不大。

但是，node-sass 已經被標記為過時了，這意味著它也會慢慢退出歷史舞臺。

為什么呢?

主要是因為維護速度跟不上了。

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

SASS 團隊的兩個主要維護者感覺自己支持 CSS 新特性的速度跟不上了，而且社區出現了 dart-sass 這個對 css 新特性支持更好的 sass 編譯器，隨著時間的推移，CSS 新特性支持上差距越來越大。最終，在 2020 年 10 月份，node-sass 宣布了不再繼續支持新特性，標記為了過時，推薦使用 dart-sass。

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

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

就這樣，node-sass 也算是推出了歷史舞臺，但是它對前端工程化的貢獻是不可磨滅的。

我們再來看下 sass 編譯器的繼任者：dart-sass。

dart-sass

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

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

因為 dart-sass 的 npm 包的編譯是用 js 做的，速度上會比 node-sass 慢，但是它主要勝在對 css 的特性支持的全，而且因為是 js 包，安裝很方便。

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

三代 sass 編譯器

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

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

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

dart-sass 是用 dart 實現的 sass 編譯器，提供的 dart-sass 的包是 js 的，由 dart 編譯而來。好處是對 css 新特性支持的更全，而且也沒有和 node 版本的綁定關系。

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

總結

css 缺少代碼組織能力和動態計算能力，所以社區出現了一些 css 預處理器：sass、less、stylus。

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

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

原文鏈接：https://mp.weixin.qq.com/s/tP_hXQ5Dc1wPKitTZ095kw