[[348873]]

就在今天，Sass 官方團隊正式宣布 Libsass 將棄用，以及基于它的 Node Sass 和 SassC，并且建議用戶使用 Dart Sass。

首先我們看下官方博客的一些回復(fù)(前半部分均來自官方博客 https://sass-lang.com/blog/libsass-is-deprecated)，然后我們再來對 Node Sass 和 Dart Sass 做一個基準測試。讀完本文以下問題將會得到解答。

• 那么為什么會有這次改動呢?
• 之后 Node Sass 還維護嗎?
• Dart Sass 能滿足我們的需求嗎?
• Dart Sass 的性能如何?
• Dart Sass 帶來的好處和壞處。

背景說明

此次改動是在 Sass 核心團隊進行了大量討論之后，得出的結(jié)論，現(xiàn)在是時候正式宣布棄用 LibSass 和基于它構(gòu)建的包(包括 Node Sass)。多年來，LibSass 顯然沒有足夠的工程帶寬來跟上 Sass 語言的最新發(fā)展 (例如，最近的語言特性是在 2018 年 11 月添加的)。盡管我們非常希望看到這種情況有所改善，但即使 LibSass 長期貢獻者 Michael Mifsud 和 Marcel Greter 的出色工作也無法跟上 CSS 和 Sass 語言開發(fā)的快速步伐。

主要包括以下四點說明

• 不再建議將 LibSass 用于新的 Sass 項目， 改為使用 Dart Sass。
• 建議所有現(xiàn)有的 LibSass 用戶制定計劃，最終遷移到 Dart Sass，并且所有 Sass 庫都制定計劃 最終放棄對 LibSass 的支持。
• 不再計劃向 LibSass 添加任何新功能，包括與新 CSS 功能的兼容性。
• LibSass 和 Node Sass 將在盡力而為的基礎(chǔ)上無限期維護，包括修復(fù)主要的錯誤和安全問題以及與最新的 Node 版本兼容。

為什么棄用?

幾年來，Sass 一直處于一種模棱兩可的狀態(tài)，LibSass 在理論上是官方支持實現(xiàn)，但實際上從它的功能表現(xiàn)來看是靜止的。隨著時間的流逝，越來越清楚感受到這種狀態(tài)對 Sass 用戶已經(jīng)造成了切實的問題。例如，經(jīng)常讓用戶感到困惑，為什么原生 CSS 的 min() 和 max() 無法正常工作，可能會認為 Sass 整體存在問題，但是實際上是因為 LibSass 不支持該功能。

官方支持的 LibSass 不僅會給個別用戶帶來痛苦，由于 LibSass 不支持去年啟動的 Sass 模塊系統(tǒng)，主要相關(guān)的 Sass 庫由于擔心其下游用戶不兼容而無法使用它， 明確指出所有 Sass 用戶應(yīng)該放棄使用 LibSass，我們希望使這些 library 的作者能夠更加切實地使用更多現(xiàn)代的功能特性。

LibSass 甚至抑制了 Sass 語言本身的發(fā)展。我們無法繼續(xù)推進有關(guān) treating / as a separator 的提議，因為他們編寫的任何代碼都會在 Dart Sass 中產(chǎn)生棄用警告或無法在 LibSass 中編譯。通過將 LibSass 標記為已棄用，情況會變得更好，并且 Sass 在支持最新版本的 CSS 方面會變得更好。

"棄用"意味著什么?

我們之所以選擇使用"棄用"一詞，是因為它在編程社區(qū)中具有很大的分量，并強烈表明用戶應(yīng)該開始計劃放棄 LibSass。但是，這并不意味著該項目已經(jīng)完全死了。LibSass 和 Node Sass 的首席維護者 Michael Mifsud 確認他計劃繼續(xù)進行與過去幾年相同級別的維護。這意味著盡管將不再添加任何功能(并且這樣 LibSass 會慢慢地逐漸偏離與最新 CSS 和 Sass 語法的兼容性 )，但將繼續(xù)無限期地發(fā)布維護版本。

可移植性和性能呢

LibSass 與 DartSass 相比有兩個主要優(yōu)點：

• 可移植性：由于它是用 C++ 編寫的，因此可以輕松地將 LibSass 嵌入其他編程語言中并提供原生(native-feeling) API。
• 性能：通過 C++ API 調(diào)用 LibSass 與使用腳本語言直接編寫代碼的速度相比非?？?。特別是，這意味著 LibSass 在 JavaScript 中比 Dart Sass 編譯為 JS 的庫速度要快得多(盡管它可與 Dart Sass 的命令行可執(zhí)行文件相媲美)。

我們正在使用 Sass 嵌入式協(xié)議來解決這兩個問題，該協(xié)議將 Sass 編譯器作為子進程運行，可以通過消息傳遞與任何主機語言進行通信。嵌入式協(xié)議支持本地 Sass API 的所有功能，包括定義自定義導(dǎo)入程序和 Sass 函數(shù)的能力，同時還提供高性能的 CLI 應(yīng)用程序。Dart Sass 已經(jīng)實現(xiàn)了嵌入式協(xié)議的編譯器端，并且正在積極開發(fā) JavaScript 端。

Dart Sass

Dart Sass 可以編譯為純 JavaScript 編寫的 sass 軟件包上傳到 npm 。純 JS 版本比獨立的可執(zhí)行文件慢，但易于集成到現(xiàn)有工作流程中，并且允許你在 JavaScript 中定義自定義函數(shù)和導(dǎo)入器。

當通過 npm 安裝時，Dart Sass 目標是實現(xiàn)一個與 Node Sass 兼容的 JavaScript API 庫。完全兼容還在開發(fā)中，但是 Dart Sass 目前支持 render() 和 renderSync() 函數(shù)。但是請注意，在默認情況下，由于異步回調(diào)的開銷，renderSync() 的速度是 render() 的兩倍以上。

// 使用示例 
var sass = require("sass"); 
 
sass.render( 
  { 
    file: scss_filename, 
  }, 
  function(err, result) { 
    /* ... */ 
  } 
); 
 
// OR 
 
var result = sass.renderSync({ 
  file: scss_filename, 
}); 

基準測試

測試腳本倉庫: https://github.com/hua1995116/sass-benchmark

接下來我們分別來測試一下，Node Sass 以及 Dart Sass 同步以及異步的性能。

測試 Sass 文件: https://github.com/ElemeFE/element/blob/dev/packages/theme-chalk/src/date-picker/date-picker.scss

測試機型: MacBook Pro (Retina, 15-inch, Mid 2014)

Node 版本: v12.16.0

基準測試庫: benchmark

速度測試

說明: 利用 benchmark 進行基準測試

結(jié)果:

• sass async x 14.01 ops/sec ±27.72% (55 runs sampled) sass sync x 28.83 ops/sec ±7.24% (63 runs sampled) node-sass async x 47.50 ops/sec ±3.10% (58 runs sampled) Fastest is node-sass async

說明: 值越大，代表速度越快，性能越好。

內(nèi)存測試

說明: 三個方法各操作 50 次后的情況。

結(jié)果:

可以看到 Node Sass 性能確實非常好，也是官方提到的優(yōu)勢。而 Dart Sass 同步的方法 比 異步方法 性能略高 2 倍左右。

總結(jié)

總體來看 Dart Sass 面向未來，支持各種新的特性。Dart Sass 純 JS 的方式也可以讓我們擺脫被 Node Sass 編譯支配的恐懼，不用再擔心 Node Sass 安裝不成功的問題了，并且 Dart Sass 也在積極地處理它的性能問題。

本文轉(zhuǎn)載自微信公眾號「秋風(fēng)的筆記」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系秋風(fēng)的筆記公眾號。