重大变更：颜色函数

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

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

CSS Color 4 的发布改变了这一切。它增加了对许多新颜色空间的支持，这些空间的色域比 sRGB 更广（更宽）。为了支持这些颜色，Sass 不得不重新思考颜色函数的工作方式。除了添加像 color.channel() 和 color.to-space() 这样的新函数外，一些较旧的函数在不再成立的假设基础上被弃用。

旧的通道函数旧的通道函数 permalink

通道名称现在在颜色空间之间是不明确的。传统的 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 参数来指示你正在处理的颜色空间。

  SCSS

  Sass

      
      Playground
    SCSS Syntax@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);

      
      Playground
    Sass Syntax@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)

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

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

  SCSS

  Sass

      
      Playground
    SCSS Syntax@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);

      
      Playground
    Sass Syntax@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)

过渡期过渡期 permalink

Dart Sass: since 1.79.0
LibSass: ✗
Ruby Sass: ✗

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

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

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.

⚠️ Heads up!

When running from the JS API, Sass doesn’t share any information across compilations, so by default it’ll print five warnings for each stylesheet that’s compiled. However, you can fix this by writing (or asking the author of your favorite framework’s Sass plugin to write) a custom Logger that only prints five errors per deprecation and can be shared across multiple compilations.

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.