Lzh on GitHub

JavaScript API

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

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

npm 上的 sass 包是一个纯 JavaScript 包，由 Dart Sass 实现构建，并包含 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);

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 更快。当使用模块级编译方法时，异步调用通常比同步调用更快，因为模拟与工作线程的同步消息传递存在开销，并且并发编译在主线程上被阻塞。

当使用 sass-embedded 包时，Compiler 和 AsyncCompiler 类提供了显著的改进。这些类在多次编译中持久化和重用单个 Dart 进程，避免了重复启动和销毁进程的需要。

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

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

https://sass-lang.com/documentation/js-api/