颜色 Colors

: Dart Sass since 1.14.0 | LibSass since 3.6.0 | Ruby Sass since 3.6.0

Sass 内置了对颜色值的支持。 就像 CSS 颜色一样，它们表示 sRGB 颜色空间 中的点，尽管许多 Sass 颜色函数 使用 HSL 坐标(这只是表示 sRGB 颜色的另一种方式)。 Sass 颜色可以写成十六进制代码(#f2ece4 或#b37399aa)，CSS 颜色名称 (midnightblue、transparent)或函数 rgb()、rgba()、 hsl() 和 hsla()。

@debug #f2ece4; // #f2ece4
@debug #b37399aa; // rgba(179, 115, 153, 67%)
@debug midnightblue; // #191970
@debug rgb(204, 102, 153); // #c69
@debug rgba(107, 113, 127, 0.8); // rgba(107, 113, 127, 0.8)
@debug hsl(228, 7%, 86%); // #dadbdf
@debug hsla(20, 20%, 85%, 0.7); // rgb(225, 215, 210, 0.7)

💡有趣的事实：

无论 Sass 颜色最初是如何编写的，它都可以与基于 HSL\ 和基于 RGB\ 的函数一起使用！

CSS 支持许多都可以表示相同颜色的不同格式：其名称、十六进制代码和功能符号。 Sass 选择将颜色编译成哪种格式取决于颜色本身、它在原始样式表中的编写方式以及当前的输出模式。 因为它可以变化如此之大，所以样式表作者不应该依赖任何特定的输出格式来编写他们编写的颜色。

Sass 支持许多有用的颜色函数，可用于通过将颜色混合在一起 或 缩放它们的色调、饱和度或亮度。

$venus: #998099;

@debug scale-color($venus, $lightness: +15%); // #a893a8
@debug mix($venus, midnightblue); // #594d85