Dart Sass
Dart Sass 是 Sass 的主要实现版本,这意味着它集成新 功能要早于任何其它的实现版本。Dart Sass 速度快、易于安装,并且 可以被编译成纯 JavaScript 代码,这使得它很容易集成到现代 web 的开发流程中。在 GitHub 上查看更多信息或者提供开发帮助。
命令行
Dart Sass 的独立命令行可执行文件是跑在高速的 Dart 虚拟机(VM)上来编译你的样式代码的。如需在命令行上安装 Dart Sass, 请参考 安装指南。 安装之后,你就可以使用它来编译源码文件了:
sass source/index.scss css/index.css
执行 sass --help
即可获取关于命令行界面的额外信息。
Dart 库
你还可以把 Dart Sass 作为 Dart 库来使用,这样既能获得 Dart 虚拟机(VM)的速度,还能获得自定义函数和 importer 的能力。以下是将其添加到 项目中的方式:
-
安装 Dart SDK。确保其
bin
目录已经被添加到PATH
环境变量中。 -
创建一个
pubspec.yaml
文件,内容如下:
name: my_project
dev_dependencies:
sass: ^1.45.2
-
执行
dart pub get
命令。 -
创建一个
compile-sass.dart
文件,内容如下:
import 'dart:io';
import 'package:sass/sass.dart' as sass;
void main(List<String> arguments) {
var result = sass.compile(arguments[0]);
new File(arguments[1]).writeAsStringSync(result);
}
- 现在就可以使用此命令来编译文件了:
dart compile-sass.dart styles.scss styles.css
- 进一步了解 如何编写 Dart 代码 (其实很容易!)以及 Sass 的 Dart API。
JavaScript 工具库
Dart Sass 还被编译为纯 JavaScript 并在 npm 上作为 sass
软件包 发布。 纯 JS 版本
比独立版本执行速度慢,但是它很容易集成到 现有的工作流中,并且允许你通过 JavaScript 自定义函数和 importer。通过执行 npm install --save-dev sass
命令将其添加到项目中并通过
require()
引入。
var sass = require('sass');
sass.render({
file: scss_filename
}, function(err, result) {
/* ... */
});
// OR
var result = sass.renderSync({
file: scss_filename
});
通过 npm 安装时,Dart Sass 提供了一个 JavaScript API 用于 兼容 Node Sass。 完全兼容的工作正在进行中,但是 Dart
Sass 目前支持 render()
和 renderSync()
函数。不过,请注意,默认情况下 renderSync()
的速度是 render()
的两倍以上,这是由于
异步回调所带来的开销而导致的。
为了避免这种性能的下降,render()
可以使用 fibers
软件包在同步代码的执行路径中调用异步 importers 。如需 开启此功能,请将
Fiber
类传递给 fiber
参数:
var sass = require("sass");
var Fiber = require("fibers");
sass.render({
file: "input.scss",
importer: function(url, prev, done) {
// ...
},
fiber: Fiber
}, function(err, result) {
// ...
});
请参考 Dart Sass 的文档 以了解更多关于 JavaScript API 的信息。