22 SASS/SCSS 高级 CSS 预处理教程：只生成运算与函数之颜色函数的使用

在上一篇文章中，我们介绍了 SASS/SCSS 的基本运算，如加减乘除等基础运算。这一篇，我们将进一步探讨 SASS/SCSS 提供的强大功能，特别是与颜色相关的函数。颜色函数不仅帮助我们动态生成颜色，还能让我们的样式更加灵活和可维护。

颜色函数概述

SASS/SCSS 中的颜色函数主要用于处理颜色值，它们可以帮助我们调整颜色的亮度、饱和度，生成不同的颜色组合。以下是一些常用的颜色函数：

• darken($color, $amount)：将颜色变暗。
• lighten($color, $amount)：将颜色变亮。
• saturate($color, $amount)：增加颜色的饱和度。
• desaturate($color, $amount)：减少颜色的饱和度。
• mix($color1, $color2, $weight)：混合两种颜色。

在接下来的部分，我们将逐个案例分析这些函数的使用。

1. darken() 和 lighten()

darken()

darken($color, $amount) 函数用于将颜色变暗。$amount 值通常是一个百分比，表示颜色变暗的程度。

$base-color: #3498db; // 基础颜色

$dark-color: darken($base-color, 20%); // 将颜色变暗 20%

.button {
  background-color: $dark-color; // 使用变暗后的颜色
}

lighten()

同样地，lighten($color, $amount) 函数用于将颜色变亮。

$base-color: #3498db; // 基础颜色

$light-color: lighten($base-color, 20%); // 将颜色变亮 20%

.button {
  background-color: $light-color; // 使用变亮后的颜色
}

2. saturate() 和 desaturate()

saturate()

使用 saturate($color, $amount) 函数可以增加颜色的饱和度。

$base-color: #3498db; // 基础颜色

$saturated-color: saturate($base-color, 30%); // 增加饱和度 30%

.button {
  background-color: $saturated-color; // 使用饱和度增强后的颜色
}

desaturate()

与之相对的是 desaturate($color, $amount)，它用于减少颜色的饱和度。

$base-color: #3498db; // 基础颜色

$desaturated-color: desaturate($base-color, 30%); // 减少饱和度 30%

.button {
  background-color: $desaturated-color; // 使用饱和度降低后的颜色
}

3. mix()

mix($color1, $color2, $weight) 是一个非常便捷的函数，可以将两种颜色混合在一起。$weight 参数决定了颜色混合时的比重。

$color1: #3498db; // 蓝色
$color2: #e74c3c; // 红色

$mixed-color: mix($color1, $color2, 50%); // 平均混合两种颜色

.button {
  background-color: $mixed-color; // 使用混合后的颜色
}

总结

在这一篇中，我们介绍了 SASS/SCSS 的颜色函数及其使用方法。通过使用 darken()、lighten()、saturate()、desaturate() 和 mix() 函数，我们可以轻松调整颜色，创建出更加符合设计需求的样式。通过这些动态的颜色处理功能，我们可以使得代码更加灵活，样式更加生动。

接下来，我们将在下一篇文章中继续探索 SASS/SCSS 中字符串函数的强大功能，敬请期待！