颜色

Compatibility (Color Spaces):

Dart Sass

since 1.79.0

LibSass

✗

Ruby Sass

✗

➤

Compatibility (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()。

• 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

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

尽管每个颜色空间对其通道都有色域边界，但 Sass 可以表示任何颜色空间的超出色域的值。这允许从广色域空间的颜色安全地转换到窄色域空间并返回，而不会丢失信息。

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

带 * 标记的空间是传统颜色空间。

缺失通道缺失通道 permalink

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

• 如果你正在混合颜色，无论是作为 CSS 插值（如动画）的一部分，还是使用 Sass 的 color.mix() 函数，缺失通道总是会取另一个颜色的值作为该通道的值，如果可能的话。

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

尽管 color.channel() 将为缺失通道返回 0，你始终可以使用 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

颜色通道在某些情况下被认为是"无功率"，因为它的值不会影响颜色在屏幕上的渲染方式。CSS 规范要求，当颜色转换为新空间时，任何无功率通道都应替换为 none。Sass 在所有情况下都执行此操作，除了转换为传统空间的情况，以确保转换为传统空间总是产生与旧浏览器兼容的颜色。

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

传统颜色空间传统颜色空间 permalink

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

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

颜色函数颜色函数 permalink

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

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