重大变更：颜色函数

某些颜色函数在设计时假设所有颜色都互相兼容，现在 Sass 支持 CSS Color 4 的所有颜色空间，这些函数不再有意义。

从历史上看，所有 Sass 颜色值都涵盖了相同的色域：无论是将颜色定义为 RGB、HSL 还是 HWB，它们都只涵盖了 sRGB 色域，并且只能表示自 1990 年代中期以来显示器可以显示的颜色。当 Sass 添加其最初的一组颜色函数时，它们假设所有颜色都可以在这三种表示形式之间自由转换，并且每个通道名称（如“红色”或“色调”）只有一个明确的含义。

CSS Color 4 的发布改变了这一切。它添加了对许多新的颜色空间的支持，这些颜色空间具有与 sRGB 不同的（更广的）色域。为了支持这些颜色，Sass 必须重新考虑颜色函数的工作方式。除了添加新的函数（如 color.channel() 和 color.to-space()）外，许多旧函数在它们基于不再成立的假设时被弃用。

旧通道函数

通道名称在颜色空间中现在是模棱两可的。传统的 RGB 空间有一个红色通道，但 display-p3、rec2020 等等也有。这意味着 color.red()、color.green()、color.blue()、color.hue()、color.saturation()、color.lightness()、color.whiteness()、color.blackness()、color.alpha() 和 color.opacity() 将被移除。相反，你可以使用 color.channel() 函数来获取特定通道的值，通常需要使用显式的 $space 参数来指示你正在使用的颜色空间。

  SCSS

  Sass

       游乐场SCSS 语法@use "sass:color";

$color: #c71585;
@debug color.channel($color, "red", $space: rgb);
@debug color.channel($color, "red", $space: display-p3);
@debug color.channel($color, "hue", $space: oklch);

       游乐场Sass 语法@use "sass:color"

$color: #c71585
@debug color.channel($color, "red", $space: rgb)
@debug color.channel($color, "red", $space: display-p3)
@debug color.channel($color, "hue", $space: oklch)

单通道调整函数

这些函数与旧通道函数存在相同的歧义问题，同时在添加 Color 4 支持之前，它们已经与 color.adjust() 冗余。不仅如此，使用 color.scale() 通常更好，因为它更适合进行与现有颜色相关的更改，而不是绝对更改。这意味着 adjust-hue()、saturate()、desaturate()、lighten()、darken()、opacify()、fade-in()、transparentize() 和 fade-out() 将被移除。请注意，这些函数从未有模块级等效项，因为它们的使用已经被劝阻。

  SCSS

  Sass

       游乐场SCSS 语法@use "sass:color";

$color: #c71585;
@debug color.adjust($color, $lightness: 15%, $space: hsl);
@debug color.adjust($color, $lightness: 15%, $space: oklch);
@debug color.scale($color, $lightness: 15%, $space: oklch);

       游乐场Sass 语法@use "sass:color"

$color: #c71585
@debug color.adjust($color, $lightness: 15%, $space: hsl)
@debug color.adjust($color, $lightness: 15%, $space: oklch)
@debug color.scale($color, $lightness: 15%, $space: oklch)

过渡期

Dart Sass: 自 1.79.0 起
LibSass: ✗
Ruby Sass: ✗

首先，我们将为所有即将被移除的函数的使用发出弃用警告。在 Dart Sass 2.0.0 中，这些函数将被完全移除。尝试调用模块级版本将抛出错误，而全局函数将被视为普通 CSS 函数并作为普通字符串发出。

你可以使用 Sass 迁移工具来自动从弃用的 API 迁移到它们的新的替代品。

我可以屏蔽警告吗？

Sass 提供了一套强大的选项来管理你看到的弃用警告以及何时看到它们。

简洁模式和详细模式

默认情况下，Sass 在简洁模式下运行，它只会在打印五次后屏蔽每种类型的弃用警告。这有助于确保用户知道何时需要了解即将发生的重大更改，而不会产生过多的控制台噪音。

相反，如果你在详细模式下运行 Sass，它将打印它遇到的所有弃用警告。这在修复弃用问题时跟踪剩余工作时很有用。你可以在命令行上使用 --verbose 标志，或者在 JavaScript API 中使用 verbose 选项来启用详细模式。

⚠️ 注意！

从 JS API 运行时，Sass 不会跨编译共享任何信息，因此默认情况下它将为每个编译的样式表打印五个警告。但是，你可以通过编写（或要求你最喜欢的框架的 Sass 插件的作者编写）一个自定义 Logger 来解决这个问题，该 Logger 每个弃用只打印五个错误，并且可以跨多个编译共享。

屏蔽依赖项中的弃用

有时，你的依赖项有你无法解决的弃用警告。你可以使用命令行上的 --quiet-deps 标志，或者在 JavaScript API 中使用 quietDeps 选项，在仍然为你的应用程序打印警告的同时，屏蔽来自依赖项的弃用警告。

对于此标志的目的，“依赖项”是任何不只是从入口点样式表中的一系列相对加载的样式表。这意味着来自加载路径的任何内容，以及通过自定义导入器加载的大多数样式表。

屏蔽特定弃用

如果你知道某个特定弃用对你来说不是问题，你可以使用命令行上的 --silence-deprecation 标志，或者在 JavaScript API 中使用 silenceDeprecations 选项，屏蔽该特定弃用的警告。