颜色

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

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

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

颜色空间

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

尽管每个颜色空间对其通道的色域都有边界，但 Sass 可以表示任何颜色空间的色域外值。这允许一个来自宽色域空间的颜色安全地转换进窄色域空间并再转换出来而不会丢失信息。

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

标有 * 的空间是遗留颜色空间。

缺失通道

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

• 如果你将颜色混合在一起，无论是作为CSS 插值的一部分用于动画之类的东西，还是使用 Sass 的 color.mix() 函数，如果可能的话，缺失通道总是会取另一个颜色在该通道上的值。
• 如果你将一个带有缺失通道的颜色转换为另一个具有类似通道的空间，该通道将在转换完成后被设置为 none。

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

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

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

无力通道

在某些情况下，颜色通道被认为是“无力的”，其值不影响颜色在屏幕上的渲染方式。CSS 规范要求当颜色被转换为新空间时，任何无力通道都应被 none 替换。Sass 在所有情况下都这样做，除了转换为遗留空间，以确保转换为遗留空间总是产生与旧版浏览器兼容的颜色。

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

遗留颜色空间

从历史上看，CSS 和 Sass 只支持标准的 RGB 色域，并且只支持 rgb、hsl 和 hwb 函数来定义颜色。因为当时所有颜色都使用相同的色域，所以每个颜色函数都适用于每种颜色，无论其颜色空间如何。Sass 仍然保留了这种行为，但仅限于较旧的函数，并且仅适用于这三种“遗留”颜色空间中的颜色。即便如此，在使用颜色函数时，明确指定你想要工作的 $space 仍然是一个好习惯。

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

颜色函数

Sass 支持许多有用的颜色函数，可用于通过混合颜色或缩放其通道值来创建基于现有颜色的新颜色。调用颜色函数时，颜色空间应始终写为不带引号的字符串以匹配 CSS，而通道名称应写为带引号的字符串，以使像 "red" 这样的通道不会被解析为颜色值。

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

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