重大变更:空 Alpha 通道

在 Dart Sass 1.64.3 之前,在 JS 和 Dart API 中,如果将 null 传递给 SassColor 构造函数,则将其视为 1。这现在已弃用。用户应改为显式传递 1 或 undefined

Sass 正在努力添加对 CSS 颜色模块级别 4 的支持。此模块中的更改之一是“缺少组件”的概念:如果颜色组件(如 alpha)缺失,则大部分情况下将其视为 0,但如果它与其他颜色进行插值(例如在渐变或动画中),它将自动采用其他颜色的值。

我们需要一种方法让 JS 和 Dart API 的用户访问和设置缺失的通道,而 null 是最自然的方法。在大多数情况下,这不是问题;打算创建不透明颜色的调用者通常只是省略 alpha 参数(或在 JS 中传递 undefined)。但如果调用者显式地传递 null,则最终将将其视为透明颜色而不是不透明颜色。

要保留当前行为,您只需在 alpha 未设置时显式传递 1 即可。在 JS

new sass.SassColor({
  red: 102,
  green: 51,
  blue: 153,
  alpha: alpha ?? 1,
});

在 Dart 中

sass.SassColor.rgb(102, 51, 153, alpha ?? 1);

💡 有趣的事实

Sass API 的 TypeScript 类型已经禁止将 null 作为 alpha 传递;它只允许不存在、undefinedNumber。但在 Dart Sass 1.64.3 之前,如果您没有使用 TypeScript 并且确实传递了 null,它仍然会被视为不透明颜色。

过渡期过渡期永久链接

兼容性
Dart Sass
自 1.64.3 起
LibSass
Ruby Sass

在 Dart Sass 1.64.3 和即将发布的 CSS 颜色级别 4 支持版本之间,Dart Sass 将继续将 null alpha 值解释为不透明颜色。但是,它会发出弃用警告以鼓励作者改为显式传递 alpha 1。