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.63.6
  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's Dart API

JavaScript 库

Dart Sass 还被编译为纯 JavaScript 并在 npm 上作为 sass 发布。 纯 JS 版本 比独立版本执行速度慢,但是它很容易集成到现有的工作流中,并且允许你通过 JavaScript 自定义函数和importer。通过执行 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);

When installed via npm, Dart Sass supports a brand new JavaScript API, as well as a legacy API that's fully compatible with the old Node Sass API. Note that when using the sass package, the synchronous API functions are more than twice as fast as the asynchronous API, due to the overhead of asynchronous callbacks.