Dart Sass

Dart Sass 是 Sass 的主要實作,這表示它會比其他任何實作都更早取得新功能。它快速、容易安裝,而且會編譯成純 JavaScript,這讓它很容易整合到現代的網路開發工作流程中。在 GitHub 上了解更多或協助開發。

命令列命令列永久連結

Dart Sass 的獨立命令列可執行檔使用超快速的 Dart VM 來編譯您的樣式表。若要在命令列上安裝 Dart Sass,請查看 安裝說明。執行後,您可以使用它來編譯檔案

sass source/index.scss css/index.css

請參閱 sass --help 以取得有關命令列介面的其他資訊。

Dart 函式庫Dart 函式庫永久連結

您也可以使用 Dart Sass 作為 Dart 函式庫,以取得 Dart VM 的速度,以及定義您自己的函式和匯入器的能力。若要將它新增到現有的專案

  1. 安裝 Dart SDK。請確定它的 bin 目錄 在您的 PATH

  2. 建立一個像這樣的 pubspec.yaml 檔案

name: my_project
dev_dependencies:
  sass: ^1.72.0
  1. 執行 dart pub get

  2. 建立一個類似這樣的 compile-sass.dart 檔案 

import 'dart:io';
import 'package:sass/sass.dart' as sass;

void main(List<String> arguments) {
  var result = sass.compileToResult(arguments[0]);
  new File(arguments[1]).writeAsStringSync(result.css);
}
  1. 現在你可以用它來編譯 檔案
dart compile-sass.dart styles.scss styles.css
  1. 深入了解 撰寫 Dart 程式碼(很簡單!)以及 Sass 的 Dart API

JavaScript 函式庫JavaScript 函式庫永久連結

Dart Sass 也以純 JavaScript sass 套件 的形式在 npm 上發布。純 JS 版本比獨立執行檔慢,但它很容易整合到現有工作流程中,而且允許你在 JavaScript 中定義自訂函式和匯入器。你可以使用 npm install --save-dev sass 將它新增到你的專案中,並以 函式庫的形式 require()

const sass = require('sass');

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

// OR

const result = await sass.compileAsync('style.scss');
console.log(result.css);

透過 npm 安裝時,Dart Sass 支援一個 全新的 JavaScript API,以及一個 舊版 API,它與舊的 Node Sass API 完全相容。請注意,當使用 sass 套件時,同步 API 函式的速度是非同步 API 的兩倍以上,因為非同步 回呼的負擔。