sass

Sass JavaScript API 可用于从 JavaScript 驱动 Sass 编译。它甚至允许应用程序控制如何加载样式表和定义自定义函数。

npm 上的sass 包是基于Dart Sass实现构建的纯 JavaScript 包，并包含 Dart Sass 的命令行界面。

npm 上的sass-embedded 包是围绕原生 Dart 可执行文件的 JavaScript 包装器，通常比 sass 更快。

sass 和 sass-embedded 都使用相同的底层Dart Sass实现提供相同的 JavaScript API，但具有速度和平台方面的权衡。

用法

JavaScript API 提供了两个用于将 Sass 编译为 CSS 的入口点，每个入口点都有一个同步变体，它返回一个普通的CompileResult，以及一个异步变体，它返回一个 Promise。**异步变体慢得多，**但它们允许自定义导入器和函数异步运行。

  • compile 和 compileAsync 获取 Sass 文件的路径，并返回将该文件编译为 CSS 的结果。这些函数接受一个额外的Options参数。

    const sass = require('sass');

    const result = sass.compile("style.scss");
    console.log(result.css);

    const compressed = sass.compile("style.scss", {style: "compressed"});
    console.log(compressed.css);

  • compileString 和 compileStringAsync 获取表示 Sass 文件内容的字符串，并返回将该文件编译为 CSS 的结果。这些函数接受一个额外的StringOptions参数。

    const sass = require('sass');

    const input = `
    h1 {
      font-size: 40px;
      code {
        font-face: Roboto Mono;
      }
    }`;

    const result = sass.compileString(input);
    console.log(result.css);

    const compressed = sass.compileString(input, {style: "compressed"});
    console.log(compressed.css);

集成

大多数流行的 Node.js 构建系统都提供了与 JS API 的集成。

旧版 API

sass 包也支持旧版 API。尽管此 API 已弃用，但它将继续得到支持，直到 sass 包的 2.0.0 版本发布。旧版 API 也受node-sass 包的支持，该包是已弃用的LibSass实现的原生扩展包装器。

旧版 API 有两个用于将 Sass 编译为 CSS 的入口点。每个入口点都可以通过传入LegacyFileOptions来编译 Sass 文件，或者通过传入LegacyStringOptions来编译 Sass 代码字符串。

  • renderSync 以同步方式运行。在使用 Dart Sass 时，它是**迄今为止最快的选项**，但代价是仅支持同步导入器和函数插件。

    const sass = require('sass'); // or require('node-sass');

    const result = sass.renderSync({file: "style.scss"});
    console.log(result.css.toString());

  • render 异步运行，并在完成时调用回调函数。在使用 Dart Sass 时，它慢得多，但它支持异步导入器和函数插件。

    const sass = require('sass'); // or require('node-sass');

    sass.render({
      file: "style.scss"
    }, function(err, result) {
      if (err) {
        // ...
      } else {
        console.log(result.css.toString());
      }
    });

速度

虽然 Sass 编译所需时间有多种因素，但有一些普遍的速度趋势可以帮助您最大程度地减少编译时间。

使用 sass 包

使用 sass 包时，由于使整个评估过程异步的开销，同步调用将比异步调用快。虽然Compiler 和 AsyncCompiler 类可用，但使用 sass 时，它们并不比模块级编译方法快。

使用 sass-embedded 包

sass-embedded 包在某些情况下提供了显着的速度改进，并且通常比 sass 对于大型或频繁的编译更快。在使用模块级编译方法时，异步调用通常比同步调用快，这是因为模拟使用工作线程进行同步消息传递的开销以及并发编译被阻塞在主线程上。

Compiler 和 AsyncCompiler 类在使用 sass-embedded 包时提供了显着的改进。这些类保留并在多个编译中重用单个 Dart 进程，避免了重复启动和拆除进程的需要。

在使用 sass-embedded 编译单个文件时，同步和异步方法之间没有太大区别。当同时运行多个编译时，AsyncCompiler 将比同步Compiler 快得多。

其他因素（如函数、导入器和 Sass 文件的复杂性）也可能影响哪种编译方法最适合您的特定用例。