sass

Sass JavaScript API 可用於從 JavaScript 驅動 Sass 編譯。它甚至允許應用程式控制樣式表的載入方式以及定義自訂函式。

npm 上的 sass 套件是一個從 Dart Sass 實作構建的純 JavaScript 套件，包含 Dart Sass 的命令列介面。

npm 上的 sass-embedded 套件是一個圍繞原生 Dart 可執行檔的 JavaScript 包裝器，通常比 sass 更快。

sass 和 sass-embedded 都使用相同的底層 Dart Sass 實作提供相同的 JavaScript API，但在速度和平台支援方面有所取捨。

用法

JavaScript API 提供兩個用於將 Sass 編譯成 CSS 的進入點，每個進入點都有一個同步變體，返回一個普通的 CompileResult，以及一個非同步變體，返回一個 Promise。非同步變體的速度要慢得多，但它們允許自訂匯入器和函式非同步執行。

compile 和 compileAsync 接受 Sass 檔案的路徑，並返回將該檔案編譯為 CSS 的結果。這些函式接受一個額外的 Options 參數。

const sass = require('sass');

const result = sass.compile("style.scss");
console.log(result.css);

const compressed = sass.compile("style.scss", {style: "compressed"});
console.log(compressed.css);

compileString 和 compileStringAsync 接受一個代表 Sass 檔案內容的字串，並返回將該字串編譯為 CSS 的結果。這些函式接受一個額外的 StringOptions 參數。

const sass = require('sass');

const input = `
h1 {
  font-size: 40px;
  code {
    font-face: Roboto Mono;
  }
}`;

const result = sass.compileString(input);
console.log(result.css);

const compressed = sass.compileString(input, {style: "compressed"});
console.log(compressed.css);

整合

大多數熱門的 Node.js 建置系統都有提供 JS API 的整合。

Webpack 使用 sass-loader 套件。
Gulp 使用 gulp-sass 套件。
Broccoli 使用 broccoli-sass-source-maps 套件。
Ember 使用 ember-cli-sass 套件。
Grunt 使用 grunt-sass 套件。

舊版 API

sass 套件也支援較舊的 API。雖然此 API 已被棄用，但它將繼續受到支援，直到 sass 套件 2.0.0 版發佈為止。舊版 API 也受到 node-sass 套件的支援，該套件是已棄用的 LibSass 實作的原生擴充程式包裝器。

舊版 API 有兩個將 Sass 編譯為 CSS 的入口點。每個入口點都可以透過傳入 LegacyFileOptions 來編譯 Sass 檔案，或透過傳入 LegacyStringOptions 來編譯 Sass 程式碼字串。

renderSync 同步執行。使用 Dart Sass 時，它是目前為止最快的選項，但其代價是僅支援同步 importer 和 function 外掛程式。

const sass = require('sass'); // or require('node-sass');

const result = sass.renderSync({file: "style.scss"});
console.log(result.css.toString());

render 非同步執行，並在完成時呼叫回呼函式。使用 Dart Sass 時，它會慢得多，但它支援非同步 importer 和 function 外掛程式。

const sass = require('sass'); // or require('node-sass');

sass.render({
  file: "style.scss"
}, function(err, result) {
  if (err) {
    // ...
  } else {
    console.log(result.css.toString());
  }
});

當使用 sass-embedded 編譯單個檔案時，同步和非同步方法之間沒有太大區別。當同時執行多個編譯時，AsyncCompiler 將比同步 Compiler 快得多。

其他因素，例如函式、匯入器和 Sass 檔案的複雜性，也可能會影響哪種編譯方法最適合您的特定用例。

sass

用法

整合

舊版 API

速度

使用 `sass` 套件

使用 `sass-embedded` 套件

用法

整合

舊版 API

速度

使用 sass 套件

使用 sass-embedded 套件

使用 `sass` 套件

使用 `sass-embedded` 套件