SASS 是一种强大的 CSS 预处理器，它可以让我们使用变量、嵌套、混合（mixin）等语法来实现更高效、更简洁的 CSS 编写方式。在 SASS 中，我们可以使用丰富的颜色函数和操作来处理颜色，让样式表更加灵活和可维护。
SASS 中的颜色函数
rgb($red, $green, $blue)
这个函数用于生成 RGB 颜色，参数分别为红、绿、蓝三个通道的值，取值范围为 0~255，例如：
$color: rgb(255, 0, 0); // 红色
rgba($red, $green, $blue, $alpha)
这个函数用于生成带不透明度的 RGB 颜色，参数分别为红、绿、蓝三个通道的值（同 rgb() 函数），以及一个 Alpha 通道的值，取值范围为 0~1，例如：
$color: rgba(255, 0, 0, 0.5); // 半透明红色
hsl($hue, $saturation, $lightness)
这个函数用于生成 HSL 颜色，参数分别为色相、饱和度、亮度三个通道的值，其中色相为 0<del>360 的角度值，饱和度和亮度为 0</del>100 的百分比值，例如：
$color: hsl(0, 100%, 50%); // 红色
hsla($hue, $saturation, $lightness, $alpha)
这个函数用于生成带不透明度的 HSL 颜色，参数同 hsl() 函数，例如：
$color: hsla(0, 100%, 50%, 0.5); // 半透明红色
lighten($color, $amount)
这个函数用于将颜色的亮度值增加一定比例，参数分别为需要改变亮度的颜色和改变的比例，比例取值范围为 0~100，例如：
$color: #f00; // 红色 .lighten-50 { color: lighten($color, 50%); // 亮度增加 50% }
darken($color, $amount)
这个函数用于将颜色的亮度值降低一定比例，参数同 lighten() 函数，例如：
$color: #f00; // 红色 .darken-50 { color: darken($color, 50%); // 亮度降低 50% }
saturate($color, $amount)
这个函数用于将颜色的饱和度增加一定比例，参数同 lighten() 函数，例如：
$color: #f00; // 红色 .saturate-50 { color: saturate($color, 50%); // 饱和度增加 50% }
desaturate($color, $amount)
这个函数用于将颜色的饱和度降低一定比例，参数同 lighten() 函数，例如：
$color: #f00; // 红色 .desaturate-50 { color: desaturate($color, 50%); // 饱和度降低 50% }
invert($color)
这个函数用于将颜色取反，即用它的补色代替，例如：
$color: #f00; // 红色 .invert { color: invert($color); // 红色的补色是青色 }
SASS 中的颜色操作
多个颜色之间的混合
我们可以使用 mix() 函数将两个颜色进行混合，生成一个新的颜色。这个函数的第一个参数为要混合的第一个颜色，第二个参数为要混合的第二个颜色，第三个参数为混合的比例，取值范围为 0~100。例如：
$color1: #f00; // 红色 $color2: #00f; // 蓝色 .mix-50 { color: mix($color1, $color2, 50%); // 50% 红色和 50% 蓝色的混合色 }
颜色之间的比较
我们可以使用 <、>、<=、>=、==、!= 等运算符对颜色进行比较，例如：
-- -------------------- ---- ------- -------- ----- -- -- -------- ----- -- -- --- -------- - -------- - -- ------ - ----- -- -------- - -------- - -- ------ - ----- - -- --------- -展开代码
颜色值的提取和修改
我们可以使用 red()、green()、blue()、hue()、saturation()、lightness() 等函数来提取颜色的通道值，例如：
$color: #f00; // 红色 $red: red($color); // 255 $green: green($color); // 0 $blue: blue($color); // 0 $hue: hue($color); // 0 $saturation: saturation($color); // 100% $lightness: lightness($color); // 50%
我们还可以使用 adjust-hue()、scale-saturation()、scale-lightness() 等函数来修改颜色的通道值，例如：
$color: #f00; // 红色 $hue: adjust-hue($color, 60deg); // 将红色的色相值增加 60 度，变成黄色 $saturation: scale-saturation($color, 50%); // 将红色的饱和度减半，变成粉色 $lightness: scale-lightness($color, -50%); // 将红色的亮度减半，变成深红色
结语
在 SASS 中使用颜色函数和操作可以帮助我们更好地处理颜色，实现更加灵活和可维护的样式表。在实际开发中，我们需要根据实际情况灵活运用这些函数和操作，提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c9a280e46428fe9e158e9f
