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 的速度,以及定義您自己的函式和匯入器的能力。要將它新增到現有專案:
-
安裝 Dart SDK。確保其
bin
目錄位於您的PATH
中。 -
建立一個像這樣的
pubspec.yaml
檔案:
name: my_project
dev_dependencies:
sass: ^1.79.4
-
執行
dart pub get
。 -
建立一個像這樣的
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);
}
- 您現在可以使用它來編譯檔案。
dart compile-sass.dart styles.scss styles.css
-
深入瞭解如何撰寫 Dart 程式碼(這很容易!)以及Sass 的 Dart API。
JavaScript 函式庫JavaScript 函式庫永久連結
Dart Sass 也以純 JavaScript 的 sass
套件 和 sass-embedded
套件 的形式發佈於 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,以及與舊 Node Sass API 完全相容的舊版 API。請注意,使用 sass
套件時,由於非同步回呼的額外負荷,同步 API 函式的速度是非同步 API 的兩倍以上。
嵌入式 Dart Sass嵌入式 Dart Sass 永久連結
Dart Sass 也支援嵌入式 Sass 協定,該協定允許任何程式語言直接與 Dart VM 通訊以執行 Sass 編譯,包括自訂函式和匯入器支援。這有兩個主要好處:
-
它可以輕鬆地為任何可以執行子程序的程式語言建立 Dart Sass 的包裝函式庫。
-
Dart VM 速度非常快,因此即使在可以使用原生
sass
套件的 JavaScript 中,它也能顯著提升效能。
以下嵌入式 Sass 包裝函式庫可用。如果您還有其他要新增的,請發送 Pull Request!
-
Node.js:
sass-embedded
套件由 Sass 團隊維護,並支援與原生 JavaScriptsass
套件相同的官方 Sass JavaScript API。 -
Go:
github.com/bep/godartsass
套件執行 Embedded Sass 並支援Hugo 靜態網站產生器。 -
Java:
de.larsgrefer.sass
套件在 Java 中執行 Embedded Sass。 -
Ruby:
sass-embedded
gem 由 Sass 活躍貢獻者 なつき 維護。 -
Rust:
sass-embedded
crate在 Rust 中執行 Embedded Sass。