重大变化：颜色函数

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

¥Historically, all Sass color values covered the same gamut: whether the colors were defined as RGB, HSL, or HWB, they only covered the sRGB gamut and could only represent the colors that monitors could display since the mid-1990s. When Sass added its original set of color functions, they assumed that all colors could be freely converted between any of these representations and that there was a single unambiguous meaning for each channel name like "red" or "hue".

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

¥The release of CSS Color 4 changed all that. It added support for many new color spaces with different (wider) gamuts than sRGB. In order to support these colors, Sass had to rethink the way color functions worked. In addition to adding new functions like color.channel() and color.to-space(), a number of older functions were deprecated when they were based on assumptions that no longer held true.

旧版通道函数旧版通道函数 permalink

¥Old Channel Functions

通道名称现在在颜色空间中是不明确的。旧版 RGB 空间有一个 red 通道，但 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 参数来指示你正在使用哪个颜色空间。

¥Channel names are now ambiguous across color spaces. The legacy RGB space has a red channel, but so do display-p3, rec2020, and many more. This means that color.red(), color.green(), color.blue(), color.hue(), color.saturation(), color.lightness(), color.whiteness(), color.blackness(), color.alpha(), and color.opacity() will be removed. Instead, you can use the color.channel() function to get the value of a specific channel, usually with an explicit $space argument to indicate which color space you’re working with.

单通道调整函数单通道调整函数 permalink

¥Single-Channel Adjustment Functions

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

¥These have the same ambiguity problem as the old channel functions, while also already being redundant with color.adjust() even before Color 4 support was added. Not only that, it’s often better to use color.scale() anyway, because it’s better suited for making changes relative to the existing color rather than in absolute terms. This means that adjust-hue(), saturate(), desaturate(), lighten(), darken(), opacify(), fade-in(), transparentize(), and fade-out() will be removed. Note that these functions never had module-scoped counterparts because their use was already discouraged.

过渡期过渡期 permalink

¥Transition Period

兼容性:

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

首先，我们将针对所有计划删除的函数的使用发出弃用警告。在 Dart Sass 2.0.0 中，这些函数将被完全删除。尝试调用模块作用域的版本将引发错误，而全局函数将被视为纯 CSS 函数并作为纯字符串发出。

¥First, we’ll emit deprecation warnings for all uses of the functions that are slated to be removed. In Dart Sass 2.0.0, these functions will be removed entirely. Attempts to call the module-scoped versions will throw an error, while the global functions will be treated as plain CSS functions and emitted as plain strings.

你可以使用 Sass 迁移器 自动从弃用的 API 迁移到新的替代 API。

¥You can use the Sass migrator to automatically migrate from the deprecated APIs to their new replacements.

Can I Silence the Warnings?Can I Silence the Warnings? permalink

Sass provides a powerful suite of options for managing which deprecation warnings you see and when.

Terse and Verbose ModeTerse and Verbose Mode permalink

By default, Sass runs in terse mode, where it will only print each type of deprecation warning five times before it silences additional warnings. This helps ensure that users know when they need to be aware of an upcoming breaking change without creating an overwhelming amount of console noise.

If you run Sass in verbose mode instead, it will print every deprecation warning it encounters. This can be useful for tracking the remaining work to be done when fixing deprecations. You can enable verbose mode using the --verbose flag on the command line, or the verbose option in the JavaScript API.

Silencing Deprecations in DependenciesSilencing Deprecations in Dependencies permalink

Sometimes, your dependencies have deprecation warnings that you can’t do anything about. You can silence deprecation warnings from dependencies while still printing them for your app using the --quiet-deps flag on the command line, or the quietDeps option in the JavaScript API.

For the purposes of this flag, a "dependency" is any stylesheet that’s not just a series of relative loads from the entrypoint stylesheet. This means anything that comes from a load path, and most stylesheets loaded through custom importers.

Silencing Specific DeprecationsSilencing Specific Deprecations permalink

If you know that one particular deprecation isn’t a problem for you, you can silence warnings for that specific deprecation using the --silence-deprecation flag on the command line, or the silenceDeprecations option in the JavaScript API.