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.24.4
  1. 执行 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 的信息。