Sass 颜色函数（手把手讲解）

什么是 Sass 颜色函数？从零开始理解它的威力

在 CSS 的世界里，颜色是构成视觉美感的基础元素。然而，当项目规模变大，颜色管理变得复杂时，手动维护色值不仅容易出错，还难以统一风格。这时候，Sass 颜色函数就登场了。它就像是为颜色打造的一套“魔法工具箱”，让你能动态地生成、调整、混合颜色，而不需要写死具体的十六进制值。

Sass 颜色函数是 Sass 编译器内置的一组函数，专门用来操作颜色。它们支持 HSL、RGB、RGBA 等多种颜色模型，可以轻松实现颜色的深浅调节、饱和度变化、色调偏移等操作。比如你可以用一句代码，就让某个主色调生成一组辅助色，完全无需手动计算每一种颜色的十六进制值。

想象一下，你正在设计一个主题系统，用户可以切换深色模式和浅色模式。如果没有 Sass 颜色函数，你可能需要为每个颜色手动写两套值。而有了它，只需要写一次基础色，其余都由函数自动推导，效率和可维护性都大幅提升。

基础颜色函数：lighten 与 darken

最常用的两个函数是 lighten() 和 darken()，它们分别用于让颜色变亮或变暗。

// 定义基础主色
$primary-color: #3498db;

// 使用 lighten 函数，增加 20% 的亮度
$light-primary: lighten($primary-color, 20%);

// 使用 darken 函数，降低 30% 的亮度
$dark-primary: darken($primary-color, 30%);

注释说明：

lighten($color, $amount) 接收两个参数：颜色值和亮度增加的百分比（0% ~ 100%）。

darken($color, $amount) 作用相反，减少亮度。

这里的 20% 表示在当前颜色基础上增加 20% 的亮度，而不是直接加 20。

两者都基于 HSL 模型工作，因此结果更符合人类对“明暗”的直觉感知。

比如你有一个蓝色按钮，想为它设计一个悬停状态的颜色。用 lighten() 可以让按钮在鼠标悬停时稍微变亮，视觉反馈更自然。

.btn-primary {
  background-color: $primary-color;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: lighten($primary-color, 15%); // 悬停时变亮
  }
}

这个技巧在 UI 设计中非常实用，能让你的界面更具动态感，而不需要额外的 CSS 类或手动查找颜色值。

调整饱和度：saturate 与 desaturate

颜色的“鲜艳程度”叫做饱和度。Sass 提供了 saturate() 和 desaturate() 函数，用来增强或减弱颜色的饱和度。

$accent-color: #e67e22;

// 增加 30% 的饱和度，颜色更鲜艳
$high-saturation: saturate($accent-color, 30%);

// 降低 50% 的饱和度，颜色趋于灰暗
$low-saturation: desaturate($accent-color, 50%);

注释说明：

saturate($color, $amount) 会提升颜色的鲜艳度，但注意过度饱和可能导致颜色失真。

desaturate($color, $amount) 适用于创建“灰度辅助色”或“弱化强调色”的场景。

这两个函数也基于 HSL 模型，因此调整逻辑更直观。

举个实际例子：你设计一个提示组件，正常状态用鲜艳的橙色，而“已解决”状态则希望颜色不那么刺眼。用 desaturate() 就能轻松实现：

.alert {
  &.info {
    background-color: $accent-color;
  }

  &.resolved {
    background-color: desaturate($accent-color, 60%); // 变灰，表示已处理
  }
}

这比手动找一个灰橙色值要高效得多，也更利于团队协作中保持颜色一致性。

色调控制：adjust-hue

有时候你想要改变颜色的“主色调”，比如把蓝色变成青色，或者把绿色偏黄。这时 adjust-hue() 就派上用场了。

$base-green: #2ecc71;

// 将色调向右移动 30 度（顺时针）
$teal-green: adjust-hue($base-green, 30deg);

// 将色调向左移动 45 度（逆时针）
$yellow-green: adjust-hue($base-green, -45deg);

注释说明：

adjust-hue($color, $degrees) 的参数是角度值，单位为 deg。

0 度是红色，60 度是黄色，120 度是绿色，180 度是青色，240 度是蓝色，300 度是品红。

你可以通过正负值来控制颜色向“色轮”上顺时针或逆时针移动。

想象你在设计一个图标系统，主色调是绿色，但需要为不同状态（如“警告”、“成功”、“错误”）生成不同色调的图标颜色。用 adjust-hue() 可以快速生成一组协调的颜色：

.icon {
  &.success {
    color: adjust-hue($base-green, 0deg); // 原色
  }

  &.warning {
    color: adjust-hue($base-green, 30deg); // 偏黄
  }

  &.error {
    color: adjust-hue($base-green, -60deg); // 偏红
  }
}

这样，所有颜色都源于同一个基础色，保证了视觉统一性，又具备足够差异性。

颜色混合：mix

当你需要把两种颜色按比例混合，比如创建一个半透明的叠加效果，mix() 函数就是你的首选。

$color-a: #ff6b6b; // 红色
$color-b: #4ecdc4; // 青色

// 混合 50% 的颜色 a 和 50% 的颜色 b
$mixed-color: mix($color-a, $color-b, 50%);

// 混合 70% 的 a 和 30% 的 b
$dominant-a: mix($color-a, $color-b, 70%);

注释说明：

mix($color1, $color2, $weight) 中，$weight 表示第一种颜色的占比，范围 0% ~ 100%。

结果颜色是两种颜色在 HSL 模型下的线性插值，更接近人眼感知。

适用于创建渐变色、按钮阴影、背景层叠等场景。

一个常见用例是创建“深色主题”下的按钮背景。你有一个亮色按钮，希望在深色模式下也能清晰可见，但又不能太刺眼。通过 mix() 将原色与黑色混合，就能快速生成合适的深色版本：

.btn {
  background-color: $primary-color;

  &.dark-mode {
    background-color: mix($primary-color, #111, 60%); // 混合 60% 原色 + 40% 黑色
  }
}

这种方式比手动调色更精确，也更容易维护。

获取颜色分量：hue、saturation、lightness、red、green、blue

Sass 还提供了获取颜色各分量的函数，帮助你进行更精细的控制。

$color: #8a2be2; // 一个紫色

// 提取色调（Hue）
$the-hue: hue($color); // 返回 276deg

// 提取饱和度（Saturation）
$the-sat: saturation($color); // 返回 68%

// 提取亮度（Lightness）
$the-lit: lightness($color); // 返回 43%

// 提取 RGB 分量
$red-value: red($color); // 138
$green-value: green($color); // 43
$blue-value: blue($color); // 226

注释说明：

hue() 返回的是角度值（0 ~ 360deg）

saturation() 返回百分比（0% ~ 100%）

lightness() 返回亮度百分比（0% ~ 100%）

red()、green()、blue() 返回 0 ~ 255 的整数值

这些函数常用于条件判断或动态生成颜色。例如，你可以根据颜色亮度自动选择文字颜色（深色背景用白色，浅色背景用黑色）：

.text {
  @if lightness($bg-color) > 50% {
    color: #333; // 浅背景用深灰
  } @else {
    color: #fff; // 深背景用白色
  }
}

这种“智能配色”逻辑在主题系统中非常实用。

实战案例：构建可复用的颜色主题系统

我们来做一个完整的例子：使用 Sass 颜色函数构建一个可配置的主题系统。

// 定义基础色
$theme-primary: #3498db;
$theme-accent: #e67e22;

// 生成主题色系
$primary-light: lighten($theme-primary, 30%);
$primary-dark: darken($theme-primary, 20%);
$accent-saturated: saturate($theme-accent, 40%);
$accent-desaturated: desaturate($theme-accent, 50%);

// 生成按钮样式
.btn {
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;

  &.primary {
    background-color: $theme-primary;
    color: #fff;

    &:hover {
      background-color: lighten($theme-primary, 15%);
    }
  }

  &.accent {
    background-color: $accent-saturated;
    color: #fff;

    &:hover {
      background-color: lighten($accent-saturated, 10%);
    }
  }

  &.outline {
    background-color: transparent;
    border: 2px solid $theme-primary;
    color: $theme-primary;

    &:hover {
      background-color: lighten($theme-primary, 90%);
    }
  }
}

这个系统的优势在于：

所有颜色都源于基础色，便于修改；
只需调整 theme-primary 一个变量，整个主题自动更新；
无需手动维护多个十六进制值；
代码可读性强，团队协作更高效。

总结：让颜色成为你的设计伙伴

Sass 颜色函数不仅仅是几个函数的集合，它是一种设计思维的升级。通过它，你可以将颜色从“静态的值”转变为“动态的变量”，让 UI 设计更灵活、更智能。

无论是调整明暗、改变饱和度，还是混合多种颜色，这些函数都能帮你快速实现视觉效果，避免重复劳动。更重要的是，它们让颜色管理变得可预测、可维护，尤其在大型项目中价值巨大。

掌握 Sass 颜色函数，就像是为你的 CSS 加装了一套智能调色盘。当你不再为“这个颜色该写成多少”而纠结，你就能把精力真正投入到设计本身。

从今天开始，尝试在你的项目中使用 lighten()、mix()、adjust-hue()，你会发现，颜色不再是一个难题，而是一个可以驾驭的创作工具。