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 的能力。以下是将其添加到 项目中的方式:

  1. 安装 Dart SDK。确保其 bin 目录已经被添加到 PATH 环境变量中。

  2. 创建一个 pubspec.yaml 文件,内容如下:

name: my_project
dev_dependencies:
  sass: ^1.45.2
  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.compile(arguments[0]);
  new File(arguments[1]).writeAsStringSync(result);
}
  1. 现在就可以使用此命令来编译文件了:
dart compile-sass.dart styles.scss styles.css
  1. 进一步了解 如何编写 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 的信息。