浏览器中的 Sass

Natalie Weizenbaum 于 2023 年 7 月 7 日发布

在 Sass 的发展历程中，我们见证了浏览器采用了我们开创的许多特性。 CSS 变量、数学函数，以及最近的 嵌套 都是受 Sass 启发的。但将Sass 本身作为编译器在浏览器中运行一直是不可能的……直到现在。

随着 Dart Sass 1.63 的发布，我们正式为 sass npm 包添加了在浏览器中直接运行的支持。游乐场或 Web IDE 的创建者不再需要进行服务器调用来编译他们的 Sass。现在，您只需加载它，然后在您的页面上直接使用它即可。

事实上，您现在就可以尝试一下！只需打开您的开发者控制台并运行以下代码：

const sass = await import('https://jspm.dev/sass');
sass.compileString('a {color: #663399}');

我还能如何使用它？我还能如何使用它？ 永久链接

我们已尽最大努力确保浏览器中的 Sass 可以以多种方式使用。它可以使用 CommonJS require() 和 ES6 import 来加载。它可以由打包工具加载（我们已经测试过 esbuild、Rollup、Vite 和 webpack），或者可以直接在浏览器中加载，无需任何打包。

唯一的注意事项是它依赖于 Immutable 库，因此如果您完全不使用任何打包工具，则需要设置一个 导入映射，以便它可以找到该依赖项。但是，如果您使用打包工具或 CDN（例如 JSPM）来为您提取依赖项，则无需担心这一点。

Dart Sass 的 README 是有关以其支持的众多方式在浏览器中启动和运行 Dart Sass 的更详细信息的规范位置。

有哪些 API 可用？有哪些 API 可用？ 永久链接

我们已尝试使尽可能多的 JavaScript API 在浏览器中可用。 自定义函数 和 导入器 都受支持，以及完整的 Sass 值 API。但是，浏览器中不可用的 API 有两类：

  1. 任何期望文件系统存在的 API。这意味着您不能传入 FileImporter，但也意味着 compile 和 compileAsync 函数不可用，因为它们采用文件路径。您需要改用 compileString 或 compileStringAsync。

  2. 旧版 JavaScript API。此 API 仅存在于与已弃用的 node-sass 包 的兼容性。由于 node-sass 从未支持在浏览器中运行，并且此 API 在从文件系统加载和从其他来源加载之间存在着模糊不清的区别，因此我们决定在浏览器中根本不支持它。

试用一下试用一下 永久链接

由于 Sass 现在可以直接在浏览器中运行，因此我们能够为 Sass 网站添加另一项期待已久的特性：Sass 游乐场！这是一种直接在浏览器中测试 Sass 的方法，并且由于它已连接到 Sass 网站的部署流程，因此它将始终使用最新版本以及所有最新特性。

游乐场中的样式表始终保存到游乐场的 URL，因此您可以轻松地共享示例样式表或使用它们向 Sass 团队报告错误。试一试吧！

鸣谢鸣谢 永久链接

我要感谢 OddBird 的优秀团队使这一切成为现实，特别是：