SASS 是一种 CSS 预处理器，它可以帮助我们编写更加容易维护和扩展的 CSS 代码。在 SASS 中，我们可以使用一些自带的函数和方法来扩展颜色，使其更加符合我们的需求。本文将介绍 SASS 扩展 Color 的具体方法，并附上示例代码，帮助你更好地理解。
SASS 中颜色的表示方式
在 SASS 中，颜色可以使用以下两种方式表示：
- RGB：通过红、绿、蓝三个颜色通道的值来表示。例如
rgb(255, 0, 0)表示红色。 - HEX：通过十六进制的方式来表示。例如
#FF0000也表示红色。
除了这两种方式，SASS 还支持将颜色转换为 HSL、HSB、CMYK 等其他表示方式，并且还提供了一些函数和方法可以在这些表示方式之间进行转换。
SASS 扩展 Color 的方法
1. 调整亮度和饱和度：lighten、darken、saturate、desaturate
在 SASS 中，我们可以使用 lighten 和 darken 方法来调整颜色的亮度。例如，如果我们有一个深蓝色的颜色值 #2368B0，想要将它变亮一些，可以这样写：
$color: #2368B0; $new-color: lighten($color, 20%);
这样就可以得到一个比原来亮 20% 的颜色值。同样的，如果想让颜色变暗，可以使用 darken 方法。
类似的，使用 saturate 和 desaturate 方法可以调整颜色的饱和度。例如，如果我们有一个黄色的颜色值，想要将它变得更饱和一些，可以这样写：
$color: #F9D23C; $new-color: saturate($color, 30%);
这样就可以得到一个比原来饱和度高 30% 的颜色值。同样的，如果想让颜色更加灰暗，可以使用 desaturate 方法。
2. 调整不透明度：alpha
除了调整颜色的亮度和饱和度，还可以使用 alpha 方法来调整颜色的不透明度。例如，如果我们有一个红色的颜色值 #FF0000，想要将它变成半透明的颜色，可以这样写：
$color: #FF0000; $new-color: alpha($color, 0.5);
这样就可以得到一个半透明的红色。如果想让颜色变得更加不透明，可以将第二个参数设置为一个大于 1 的值。
3. 混合颜色：mix
在 SASS 中，我们可以使用 mix 方法将两个颜色混合起来，得到一个新的颜色。例如，如果我们有一个蓝色的颜色值 #2368B0，想要将它和一个黄色的颜色值 #F9D23C 混合起来，可以这样写：
$color1: #2368B0; $color2: #F9D23C; $new-color: mix($color1, $color2, 50%);
这样就可以得到一个蓝色和黄色各占 50% 的颜色。如果想让其中一个颜色占比更大，可以将第三个参数设置为一个大于 50 的值。
4. 获取颜色的组成部分：red、green、blue、hue、saturation、lightness
在 SASS 中，我们可以使用 red、green、blue、hue、saturation、lightness 方法获取一个颜色的组成部分。例如，如果我们有一个绿色的颜色值 #00FF00，想要获取它的红色通道值，可以这样写：
$color: #00FF00; $red-value: red($color);
这样就可以得到 0，也就是绿色的红色通道值。同样的，可以分别使用 green 和 blue 方法获取绿色的绿色通道值和蓝色通道值。
而 hue、saturation 和 lightness 方法则适用于 HSL 颜色，可以获取颜色的色相、饱和度和亮度。
示例代码
下面是一些示例代码，帮助你更好地理解 SASS 扩展 Color 的方法：
-- -------------------- ---- ------- -- -------- ------- -------- ------------ --------------- ----- ------------ ------------------ ----- -- ------ ------- -------- ------------ ------------- ----- -- ---- -------- -------- -------- -------- ------------ ------------ -------- ----- -- --------- ------- -------- ----------- ------------ ------------- -------------- ------------ ------------- ------- -------- ----------- ------------ ------------------ ------------------- ----------------- ------------------
总结
通过使用 SASS 扩展 Color 的方法，我们可以更方便地调整和管理颜色，使得代码更加易于维护和扩展。需要注意的是，这些方法使用时需要注意参数的取值范围和单位，否则可能会得到意外的结果。希望这篇文章可以帮助你更好地理解 SASS 中的颜色扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649c340748841e9894900ed5