Colors 颜色类型

约 860 字大约 3 分钟

2025-04-04

在 Sass 中，颜色（Colors） 是一个强大的数据类型，支持多种格式和操作函数，能够灵活生成、调整和混合颜色。以下是详细说明：

一、支持的颜色格式

Sass 兼容所有 CSS 颜色格式，并支持动态操作：

格式	示例	说明
HEX	`#ff0000`, `#f00`	十六进制表示（支持简写）
RGB	`rgb(255, 0, 0)`	红、绿、蓝通道（0-255）
RGBA	`rgba(255, 0, 0, 0.5)`	带透明度的 RGB（0-1）
HSL	`hsl(0, 100%, 50%)`	色相、饱和度、亮度
HSLA	`hsla(0, 100%, 50%, 0.5)`	带透明度的 HSL
颜色关键字	`red`, `transparent`	CSS 预定义颜色名

二、颜色操作函数

Sass 提供丰富的函数来生成和调整颜色：

1、颜色生成

函数	作用	示例	编译结果
`rgb($r, $g, $b)`	生成 RGB 颜色	`rgb(255, 0, 0)`	`#ff0000`
`rgba($r, $g, $b, $a)`	生成 RGBA 颜色	`rgba(255, 0, 0, 0.5)`	`rgba(255,0,0,0.5)`
`hsl($h, $s, $l)`	生成 HSL 颜色	`hsl(0, 100%, 50%)`	`#ff0000`
`hsla($h, $s, $l, $a)`	生成 HSLA 颜色	`hsla(0, 100.00%, 50.00%, 0.50)`	`hsla(0, 100%, 50%, 0.5)`
`mix($color1, $color2, $weight)`	混合两种颜色	`mix(red, blue, 50%)`	`#800080`（紫色）

2、颜色调整

函数	作用	示例	编译结果
`lighten($color, $amount)`	增加亮度（0%-100%）	`lighten(#800, 20%)`	`#e60000`
`darken($color, $amount)`	降低亮度	`darken(#ff0000, 20%)`	`#990000`
`saturate($color, $amount)`	增加饱和度	`saturate(#808080, 100%)`	`#ff0000`
`desaturate($color, $amount)`	降低饱和度	`desaturate(red, 50%)`	`#bf4040`
`opacify($color, $amount)`	增加不透明度（0-1）	`opacify(rgba(255,0,0,0.5), 0.2)`	`rgba(255,0,0,0.7)`
`transparentize($color, $amount)`	降低不透明度	`transparentize(red, 0.3)`	`rgba(255,0,0,0.7)`
`adjust-hue($color, $degrees)`	调整色相（0-360 度）	`adjust-hue(red, 120deg)`	`#00ff00` （绿色）
`complement($color)`	取补色（色相旋转 180 度）	`complement(red)`	`cyan`
`invert($color)`	反色（RGB 取反）	`invert(white)`	`black`

3、颜色信息提取

函数	作用	示例	编译结果
`red($color)`	提取红色通道值（0-255）	`red(#ff0000)`	`255`
`green($color)`	提取绿色通道值	`green(#00ff00) → 255`	`255`
`blue($color)`	提取蓝色通道值	`blue(#0000ff)`	`255`
`hue($color)`	提取 HSL 色相（0-360 度）	`hue(red)`	`0deg`
`saturation($color)`	提取 HSL 饱和度（0%-100%）	`saturation(red)`	`100%`
`lightness($color)`	提取 HSL 亮度（0%-100%）	`lightness(red)`	`50%`
`alpha($color)`	提取透明度（0-1）	`alpha(rgba(0,0,0,0.5))`	`0.5`

三、实际应用场景

1、主题色系管理

$primary: #007bff;
$primary-hover: darken($primary, 10%);
$primary-disabled: transparentize($primary, 0.5);

.button {
  background: $primary;
  &:hover {
    background: $primary-hover;
  }
  &:disabled {
    background: $primary-disabled;
  }
}

2、动态生成渐变

@function gradient($color) {
  @return linear-gradient(
    adjust-hue($color, 15deg),
    $color,
    darken($color, 10%)
  );
}

.element {
  background: gradient(#ff0000);
}

3、颜色透明度叠加

$overlay: rgba(0, 0, 0, 0.5);
.modal {
  background: opacify($overlay, 0.2); // rgba(0,0,0,0.7)
}

四、注意事项

单位兼容性：
- HSL 的色相使用 deg 单位（如 120deg），但 Sass 允许省略单位（如 120）。
- 透明度调整时，opacify 和 transparentize 的参数为 绝对值（如 0.2 表示增加/减少 0.2）。
颜色插值：
- 在字符串插值中直接使用颜色变量会输出 HEX 格式：
```
$color: red;
.class {
  color: #{$color};
} // 输出 color: #ff0000;
```
浏览器渲染差异：
- HSL 和 RGB 的转换可能因浏览器处理方式略有差异，建议在关键场景测试实际效果。

五、颜色与 CSS 变量的结合

Sass 颜色可与 CSS 自定义属性（变量）结合，实现动态主题切换：

:root {
  --primary-color: #{#007bff};
}

.element {
  background: var(--primary-color);
}

掌握 Sass 颜色操作，可以轻松实现动态主题、状态交互和视觉效果优化，大幅提升样式代码的灵活性和可维护性！ 🎨

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24