首页>编程相关>其他源码
下载

Sass 的 Dart 实现。 Sass 让 CSS 变得有趣。

  • 使用 Dart Sass

    • sass_api包

    • 浏览器中的 Dart Sass

    • 旧版 JavaScript API

    • 将 Sass 与 Jest 结合使用

    • 来自 Chocolatey 或 Scoop (Windows)

    • 来自自制软件 (macOS)

    • 独立式

    • 来自 npm

    • 来自酒吧

    • 从源头

    • 在 Docker 中

  • 为什么是达特？

  • 兼容性政策

    • 浏览器兼容性

    • Node.js 兼容性

    • 无效的 CSS

  • 嵌入式 Dart Sass

    • 用法

  • 与 Ruby Sass 的行为差异

使用 Dart Sass

有几种不同的方法来安装和运行 Dart Sass，具体取决于您的环境和需求。

来自 Chocolatey 或 Scoop (Windows)

如果您使用 Windows 的 Chocolatey 包管理器或 Scoop 包管理器，则可以通过运行来安装 Dart Sass

 choco 安装 sass

或者

舀安装 sass

这将在命令行上为您提供一个sass可执行文件，该可执行文件将运行 Dart Sass。有关详细信息，请参阅 CLI 文档。

从 Homebrew（macOS 或 Linux）

如果您使用 Homebrew 包管理器，则可以通过运行来安装 Dart Sass

酿造安装 sass/sass/sass

这将在命令行上为您提供一个sass可执行文件，该可执行文件将运行 Dart Sass。

独立式

您可以从 GitHub 发布页面下载适用于您的操作系统的独立 Dart Sass 存档，其中包含 Dart VM 和可执行文件的快照。解压它，将目录添加到您的路径中，重新启动终端， sass可执行文件就可以运行了！

来自 npm

Dart Sass 可以作为 npm 包编译为 JavaScript。您可以使用npm install -g sass全局安装它，这将提供对sass可执行文件的访问。您还可以使用npm install --save-dev sass将其添加到您的项目中。这提供了可执行文件和库：

 const sass = require('sass');const result = sass.compile(scssFilename);// OR// 请注意，`compileAsync()` 比 `compile()` 慢得多。const result = wait sass.compileAsync( scss文件名);

请参阅 Sass 网站以获取完整的 API 文档。

浏览器中的 Dart Sass

sass npm 包也可以直接在浏览器中运行。只要您禁用重命名（例如 esbuild 中的--keep-names ），它就与所有主要的 Web 捆绑程序兼容。您还可以直接从浏览器将其作为 ECMAScript 模块导入，无需任何捆绑（假设也提供了node_modules ）：

 <脚本类型=“导入映射”>
  {“导入”：{“不可变”：“./node_modules/immutable/dist/immutable.es.js”，“sass”：“./node_modules/sass/sass.default.js”}
  }</script><!-- 支持 Safari 16.3 等浏览器，不支持导入地图。 --><script async src="https://unpkg.com/es-module-shims@^1.7.0" crossorigin="anonymous"></script><script type="module">
  从 'sass' 导入* as sass；

  console.log(sass.compileString(` .box { width: 10px + 15px; } `));</script>

或者从 CDN：

 <脚本类型=“导入映射”>
  {“导入”：{“不可变”：“https://unpkg.com/immutable@^4.0.0”，“sass”：“https://unpkg.com/sass@^1.63.0/sass.default .js"}
  }</script><!-- 支持 Safari 16.3 等浏览器，不支持导入地图。 --><script async src="https://unpkg.com/es-module-shims@^1.7.0" crossorigin="anonymous"></script><script type="module">
  从 'sass' 导入 * as sass；

  console.log(sass.compileString(` .box { width: 10px + 15px; } `));</script>

或者甚至与其所有依赖项捆绑在一起：

 <脚本类型=“模块”>
  从'https://jspm.dev/sass'导入*作为sass；

  console.log(sass.compileString(` .box { width: 10px + 15px; } `));</script>

由于浏览器无法访问文件系统，因此无法使用compile()和compileAsync()函数。如果要加载其他文件，则需要将自定义导入器传递给compileString()或compileStringAsync() 。浏览器也不支持旧版 API。

旧版 JavaScript API

Dart Sass 还支持较旧的 JavaScript API，该 API 与 Node Sass 完全兼容（下面列出了一些例外），并支持render()和renderSync()函数。该 API 已被视为已弃用，并将在 Dart Sass 2.0.0 中删除，因此在新项目中应避免使用。

Sass 对旧版 JavaScript API 的支持有以下限制：

  • 仅支持outputStyle的"expanded"和"compressed"值。

  • Dart Sass 不支持precision选项。 Dart Sass 默认为所有现有浏览器提供足够高的精度，并且进行自定义将使代码效率大大降低。

  • Dart Sass 不支持sourceComments选项。源映射是定位生成选择器来源的推荐方法。

将 Sass 与 Jest 结合使用

如果您使用 Jest 来运行测试，请注意它有一个长期存在的错误，即它的默认测试环境会破坏 JavaScript 的内置instanceof运算符。 Dart Sass 的 JS 包相当多地使用了instanceof ，因此为了避免破坏 Sass，您需要安装jest-environment-node-single-context并将testEnvironment: 'jest-environment-node-single-context'添加到您的 Jest 配置中。

来自酒吧

如果您是 Dart 用户，可以使用pub global activate sass全局安装 Dart Sass，这将提供sass可执行文件。您还可以将其添加到您的 pubspec 并将其用作库。我们强烈建议使用前缀sass导入它：

导入 'package:sass/sass.dart' as sass;void main(List<String> args) { print(sass.compile(args.first));
}

有关详细信息，请参阅 Dart API 文档。

sass_api包

Dart 用户还可以通过sass_api包访问更深入的 API。这提供了对 Sass AST 和 API 的访问，用于解析 Sass 负载，而无需运行完整编译。它被分离到自己的包中，以便它可以独立于主sass包来增加其版本号。

从源头

假设您已经签出此存储库：

  1. 安装飞镖。如果您手动下载存档而不是使用安装程序，请确保 SDK 的bin目录位于您的PATH上。

  2. 安装缓冲区。这用于为嵌入式编译器构建协议缓冲区。

  3. 在此存储库中，运行dart pub get 。这将安装 Dart Sass 的依赖项。

  4. 运行dart run grinder protobuf 。这将下载并构建嵌入式协议定义。

  5. 运行dart bin/sass.dart path/to/file.scss 。

就是这样！

在 Docker 中

您可以使用以下 Dockerfile 命令在 Docker 中安装并运行 Dart Sass：

 # Dart stageFROM bufbuild/buf AS bufFROM dart:stable AS dart# 添加您的 scss 文件COPY --from=another_stage /app /app# 包含协议缓冲区二进制文件COPY --from=buf /usr/local/bin/buf /usr/local/ bin/WORKDIR /dart-sassRUN git 克隆 https://github.com/sass/dart-sass.git 。 &&
   飞镖酒吧获取 &&
   dart rungrinderprotobuf# 这是你在 scss 文件上运行 sass.dart 的地方RUN dart ./bin/sass.dart /app/sass/example.scss /app/public/css/example.css

为什么是达特？

Dart Sass 已取代 Ruby Sass 成为 Sass 语言的规范实现。我们选择 Dart 是因为它具有许多优点：

  • 速度很快。 Dart VM 经过高度优化，并且一直在变得越来越快（有关最新的性能数据，请参阅perf.md ）。它比 Ruby 快得多，并且与 C++ 接近。

  • 它是便携式的。 Dart VM 没有外部依赖项，可以将应用程序编译成独立的快照文件，因此我们可以将 Dart Sass 分发为仅三个文件（VM、快照和包装器脚本）。 Dart 还可以编译为 JavaScript，这使得通过 npm 分发 Sass 变得很容易，我们的大多数用户已经在使用 npm。

  • 很容易写。 Dart 是一种比 C++ 更高级的语言，这意味着它不需要太多内存管理和构建系统的麻烦。它也是静态类型的，这使得比 Ruby 更容易自信地进行大型重构。

  • 它对贡献者更友好。 Dart 比 Ruby 更容易学习，尤其是 Google 中的许多 Sass 用户已经熟悉它。更多的贡献者意味着更快、更一致的开发。

兼容性政策

在大多数情况下，Dart Sass 遵循语义版本控制。我们认为以下所有内容都是版本化 API 的一部分：

  • Dart Sass 实现的 Sass 语言语义。

  • 达特 API。

  • JavaScript API。

  • 命令行界面。

由于 Dart Sass 具有跨 Dart、JavaScript 和独立发行版共享的单一版本，因此这可能意味着当一个或多个发行版实际上没有重大更改时，我们会增加主版本号。但是，我们将尝试限制所做的重大更改的数量，并将它们分组到尽可能少的版本中，以最大程度地减少客户流失。我们强烈鼓励用户使用变更日志来充分了解每个版本中的所有更改。

有一个例外，即可能在主要版本修订之外进行重大更改。有时 CSS 会添加与现有 Sass 语法在某种程度上不兼容的功能。由于 Sass 致力于完全兼容 CSS，因此我们有时需要破坏与旧 Sass 代码的兼容性，以保持与 CSS 的兼容性。

在这些情况下，我们将首先发布一个 Sass 版本，该版本会对任何行为将发生变化的样式表发出弃用警告。然后，在发布包含这些弃用警告的版本至少三个月后，我们将发布一个对 Sass 语言语义进行重大更改的次要版本。

浏览器兼容性

一般来说，我们认为对 Dart Sass 的 CSS 输出进行的任何更改都会导致 CSS 在真实浏览器中停止工作，这都是重大更改。然而，在某些情况下，这种更改会带来巨大的好处，并且只会对一小部分很少使用的浏览器产生负面影响。我们不想在主要版本发布时阻止此类更改。

因此，如果某个更改会破坏与 StatCounter GlobalStats 统计的全球市场份额不到 2% 的浏览器的兼容性，我们可能会发布包含该更改的 Dart Sass 次要版本。

Node.js 兼容性

只要Node.js 仍支持该版本，我们就认为放弃对给定 Node.js 版本的支持是一项重大更改。这意味着根据 Node.js 版本页面，版本被列为“当前”、“活动 LTS”或“维护 LTS”。一旦 Node.js 版本不再支持 LTS，Dart Sass 就会认为自己可以在必要时中断支持。

无效的 CSS

对产生无效 CSS 输出的 Sass 样式表行为的更改不被视为重大更改。在添加对新 CSS 功能的支持时，此类更改几乎总是必要的，而将所有此类功能延迟到新的主要版本对大多数用户来说会造成过度负担。

例如，当 Sass 开始解析calc()表达式时，无效表达式calc(1 +)变成了 Sass 错误，而之前它是按原样传递的。这不被视为重大更改，因为calc(1 +)从一开始就不是有效的 CSS。

嵌入式 Dart Sass

Dart Sass 包含嵌入式 Sass 协议的编译器端的实现。它被设计为嵌入到主机语言中，然后公开 API 供用户调用 Sass 并定义自定义函数和导入器。

用法

  • sass --embedded启动嵌入式编译器并监听标准输入。

  • sass --embedded --version在 JSON 中打印id = 0的versionResponse并退出。

当您将 Dart Sass 安装为 npm 包时， --embedded命令行标志不可用。 --embedded不支持其他命令行标志。

与 Ruby Sass 的行为差异

Dart Sass 和 Ruby Sass 之间存在一些故意的行为差异。这些通常是 Ruby Sass 出现不良行为的地方，实现正确的行为比实现兼容的行为要容易得多。这些都应该具有针对 Ruby Sass 的跟踪错误以更新参考行为。

  1. @extend只接受简单选择器，就像selector-extend()的第二个参数一样。请参阅第 1599 期。

  2. 不支持主题选择器。请参阅第 1126 期。

  3. 伪选择器参数被解析为<declaration-value> ，而不是进行更有限的自定义解析。参见第 2120 期。

  4. 数字精度设置为 10。请参阅问题 1122。

  5. 缩进语法解析器更加灵活：它不需要整个文档的缩进一致。请参阅问题 2176。

  6. 颜色不支持逐通道算术。请参阅第 2144 期。

  7. 无单位数字不==具有相同值的单位数字。此外，映射键遵循与== -equality 相同的逻辑。请参阅第 1496 期。

  8. 带有百分比单位的rgba()和hsla() alpha 值被解释为百分比。其他单位禁止。请参阅第 1525 期。

  9. 传递给函数过多的变量参数是一个错误。请参阅问题 1408。

  10. 如果在媒体查询外部定义了相同的@extend ，则允许@extend到达媒体查询外部。这不会被明确跟踪，因为当问题 1050 得到修复时，它将变得无关紧要。

  11. 一些包含占位符选择器的伪选择器将在 Ruby Sass 中不存在的地方进行编译。这更好地匹配相关选择器的语义，并且效率更高。请参阅第 2228 期。

  12. 缩进语法不支持旧式:property value语法。请参阅第 2245 期。

  13. 不支持参考组合器。参见第 303 期。

  14. 通用选择器统一是对称的。请参阅问题 2247。

  15. @extend如果匹配但无法统一，则不会产生错误。请参阅第 2250 期。

  16. Dart Sass 目前仅支持 UTF-8 文档。我们希望支持更多，但 Dart 目前不支持它们。例如，请参阅 dart-lang/sdk#11744。

免责声明：这不是 Google 官方产品。

展开
附加信息
相关应用
为您推荐
相关资讯 全部