Historically, all Sass color values covered the same gamut: whether the colorswere defined asRGB,HSL, orHWB, they only coveredthesRGB gamut and couldonly represent the colors that monitors could display since the mid-1990s. WhenSass added its original set of color functions, they assumed that all colorscould be freely converted between any of these representations and that therewas a single unambiguous meaning for each channel name like "red" or "hue".

The release ofCSS Color 4 changed all that. It added support for many newcolor spaces with different (wider) gamuts thansRGB. In order to supportthese colors, Sass had to rethink the way color functions worked. In addition toadding new functions likecolor.channel() andcolor.to-space(), a numberof older functions were deprecated when they were based on assumptions that nolonger held true.

Old Channel FunctionsOld Channel Functions permalink

Channel names are now ambiguous across color spaces. The legacyRGB space has ared channel, but so dodisplay-p3,rec2020, and many more. This means thatcolor.red(),color.green(),color.blue(),color.hue(),color.saturation(),color.lightness(),color.whiteness(),color.blackness(),color.alpha(), andcolor.opacity() will beremoved. Instead, you can use thecolor.channel() function to get the valueof a specific channel, usually with an explicit$space argument to indicatewhich color space you’re working with.

• 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)

Single-Channel Adjustment FunctionsSingle-Channel Adjustment Functions permalink

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

• 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)

Transition PeriodTransition Period permalink

Compatibility:

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

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

You can usethe Sass migrator to automatically migrate from the deprecatedAPIs 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 deprecationwarnings 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 ofdeprecation warning five times before it silences additional warnings. Thishelps ensure that users know when they need to be aware of an upcoming breakingchange without creating an overwhelming amount of console noise.

If you run Sass in verbose mode instead, it will printevery deprecationwarning it encounters. This can be useful for tracking the remaining work to bedone when fixing deprecations. You can enable verbose mode usingthe--verbose flag on the command line, ortheverbose option in the JavaScript API.

Silencing Deprecations in DependenciesSilencing Deprecations in Dependencies permalink

Sometimes, your dependencies have deprecation warnings that you can’t doanything about. You can silence deprecation warnings from dependencies whilestill printing them for your app usingthe--quiet-deps flag on the command line, orthequietDeps option in the JavaScript API.

For the purposes of this flag, a "dependency" is any stylesheet that’s not justa series of relative loads from the entrypoint stylesheet. This means anythingthat 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 cansilence warnings for that specific deprecation usingthe--silence-deprecation flag on the command line, orthesilenceDeprecations option in the JavaScript API.