颜色

兼容性 (Color Spaces):

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

➤

兼容性 (Level 4 Syntax):

Dart Sass

since 1.14.0

LibSass

✗

Ruby Sass

since 3.6.0

➤

Sass 内置了对颜色值的支持。就像 CSS 颜色一样，每种颜色代表特定颜色空间（如 rgb 或 lab）中的一个点。Sass 颜色可以写成十六进制代码（#f2ece4 或 #b37399aa）、CSS 颜色名称（midnightblue、transparent）或颜色函数，如 rgb()、lab() 或 color()。

¥Sass has built-in support for color values. Just like CSS colors, each color represents a point in a particular color space such as rgb or lab. Sass colors can be written as hex codes (#f2ece4 or #b37399aa), CSS color names (midnightblue, transparent), or color functions like rgb(), lab(), or color().

• SCSS
• Sass

Playground

SCSS Syntax

@debug #f2ece4; // #f2ece4
@debug #b37399aa; // rgba(179, 115, 153, 67%)
@debug midnightblue; // #191970
@debug rgb(204 102 153); // #c69
@debug lab(32.4% 38.4 -47.7 / 0.7); // lab(32.4% 38.4 -47.7 / 0.7)
@debug color(display-p3 0.597 0.732 0.576); // color(display-p3 0.597 0.732 0.576)

Playground

Sass Syntax

@debug #f2ece4  // #f2ece4
@debug #b37399aa  // rgba(179, 115, 153, 67%)
@debug midnightblue  // #191970
@debug rgb(204 102 153)  // #c69
@debug lab(32.4% 38.4 -47.7 / 0.7)  // lab(32.4% 38.4 -47.7 / 0.7)
@debug color(display-p3 0.597 0.732 0.576)  // color(display-p3 0.597 0.732 0.576)

颜色空间颜色空间 permalink

¥Color Spaces

Sass 支持与 CSS 相同的颜色空间集。除非 Sass 颜色位于 旧颜色空间 中或你使用 color.to-space() 将其转换为另一个空间，否则它将始终在写入的相同颜色空间中发出。Sass 中的所有其他颜色函数将始终返回与原始颜色相同空间中的颜色，即使该函数在另一个空间中对该颜色进行了更改。

¥Sass supports the same set of color spaces as CSS. A Sass color will always be emitted in the same color space it was written in unless it’s in a legacy color space or you convert it to another space using color.to-space(). All the other color functions in Sass will always return a color in the same spaces as the original color, even if the function made changes to that color in another space.

虽然每个颜色空间对其通道的预期色域都有界限，但 Sass 可以表示任何颜色空间的色域外值。这允许将宽色域空间中的颜色安全地转换为窄色域空间并返回，而不会丢失信息。

¥Although each color space has bounds on the gamut it expects for its channels, Sass can represent out-of-gamut values for any color space. This allows a color from a wide-gamut space to be safely converted into and back out of a narrow-gamut space without losing information.

以下是 Sass 支持的所有颜色空间的完整列表。你可以阅读了解这些空间 在 MDN 上。

¥Following is a full list of all the color spaces Sass supports. You can read learn about these spaces on MDN.

标有 * 的空间是 旧颜色空间。

¥Spaces marked with * are legacy color spaces.

缺失通道缺失通道 permalink

¥Missing Channels

CSS 和 Sass 中的颜色可以有 "缺失通道"，写为 none，表示其值未知或不影响颜色渲染方式的通道。例如，你可能会写 hsl(none 0% 50%)，因为如果饱和度是 0%，则色调无关紧要。在大多数情况下，缺失通道仅被视为 0 值，但它们偶尔会出现：

¥Colors in CSS and Sass can have "missing channels", which are written none and represent a channel whose value isn’t known or doesn’t affect the way the color is rendered. For example, you might write hsl(none 0% 50%), because the hue doesn’t matter if the saturation is 0%. In most cases, missing channels are just treated as 0 values, but they do come up occasionally:

• 如果你将颜色混合在一起，无论是作为 CSS 插值的一部分（例如动画）还是使用 Sass 的 color.mix() 函数，缺失通道始终会尽可能采用该通道的其他颜色值。

  ¥If you’re mixing colors together, either as part of CSS interpolation for something like an animation or using Sass’s color.mix() function, missing channels always take on the other color’s value for that channel if possible.

• 如果将缺少通道的颜色转换为具有类似通道的另一个空间，则转换完成后该通道将设置为 none。

  ¥If you convert a color with a missing channel to another space that has an analogous channel, that channel will be set to none after the conversion is complete.

虽然 color.channel() 将为缺失通道返回 0，但你始终可以使用 color.is-missing() 检查它们。

¥Although color.channel() will return 0 for missing channels, you can always check for them using color.is-missing().

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

$grey: hsl(none 0% 50%);

@debug color.mix($grey, blue, $method: hsl); // hsl(240, 50%, 50%)
@debug color.to-space($grey, lch); // lch(53.3889647411% 0 none)

Playground

Sass Syntax

@use 'sass:color'

$grey: hsl(none 0% 50%)

@debug color.mix($grey, blue, $method: hsl)  // hsl(240, 50%, 50%)
@debug color.to-space($grey, lch)  // lch(53.3889647411% 0 none)

无源通道无源通道 permalink

¥Powerless Channels

在某些情况下，颜色通道被视为 "powerless"，其值不会影响颜色在屏幕上的渲染方式。CSS 规范要求，当颜色转换为新空间时，任何无能为力的通道都应替换为 none。除了转换为旧空间外，Sass 在所有情况下都会这样做，以保证转换为旧空间始终产生与旧浏览器兼容的颜色。

¥A color channel is considered "powerless" under certain circumstances its value doesn’t affect the way the color is rendered on screen. The CSS spec requires that when a color is converted to a new space, any powerless channels are replaced by none. Sass does this in all cases except conversions to legacy spaces, to guarantee that converting to a legacy space always produces a color that’s compatible with older browsers.

有关无功率通道的更多详细信息，请参阅 color.is-powerless()。

¥For more details on powerless channels, see color.is-powerless().

旧颜色空间旧颜色空间 permalink

¥Legacy Color Spaces

从历史上看，CSS 和 Sass 仅支持标准 RGB 色域，并且仅支持用于定义颜色的 rgb、hsl 和 hwb 函数。因为当时所有颜色都使用相同的色域，所以每个颜色函数都可以处理每个颜色，而不管其色彩空间如何。Sass 仍然保留这种行为，但仅限于较旧的函数，并且仅适用于这三个 "legacy" 颜色空间中的颜色。即便如此，在使用颜色函数时明确指定要使用的 $space 仍然是一种很好的做法。

¥Historically, CSS and Sass only supported the standard RGB gamut, and only supported the rgb, hsl, and hwb functions for defining colors. Because at the time all colors used the same gamut, every color function worked with every color regardless of its color space. Sass still preserves this behavior, but only for older functions and only for colors in these three "legacy" color spaces. Even so, it’s still a good practice to explicitly specify the $space you want to work in when using color functions.

在将旧颜色值转换为 CSS 时，Sass 还会在不同旧颜色空间之间自由转换。这始终是安全的，因为它们都使用相同的底层颜色模型，这有助于确保 Sass 以尽可能兼容的格式发出颜色。

¥Sass will also freely convert between different legacy color spaces when converting legacy color values to CSS. This is always safe, because they all use the same underlying color model, and this helps ensure that Sass emits colors in as compatible a format as possible.

颜色函数颜色函数 permalink

¥Color Functions

Sass 支持许多有用的 颜色函数，可用于通过 将颜色混合在一起 或 缩放其通道值 在现有颜色的基础上创建新颜色。调用颜色函数时，颜色空间应始终写为未加引号的字符串以匹配 CSS，而通道名称应写为加引号的字符串，以便不会将 "red" 等通道解析为颜色值。

¥Sass supports many useful color functions that can be used to create new colors based on existing ones by mixing colors together or scaling their channel values. When calling color functions, color spaces should always be written as unquoted strings to match CSS, while channel names should be written as quoted strings so that channels like "red" aren’t parsed as color values.

• SCSS
• Sass

Playground

SCSS Syntax

@use 'sass:color';

$venus: #998099;

@debug color.scale($venus, $lightness: +15%, $space: oklch);
// rgb(170.1523703626, 144.612080603, 170.1172627174)
@debug color.mix($venus, midnightblue, $method: oklch);
// rgb(95.9363315581, 74.5687109346, 133.2082569526)

Playground

Sass Syntax

@use 'sass:color'

$venus: #998099

@debug color.scale($venus, $lightness: +15%, $space: oklch)
// rgb(170.1523703626, 144.612080603, 170.1172627174)
@debug color.mix($venus, midnightblue, $method: oklch)
// rgb(95.9363315581, 74.5687109346, 133.2082569526)