Sass 颜色函数
Sass 颜色函数
我们将 Sass 的颜色函数分为三部分：设置颜色函数、获取颜色函数和操作颜色函数。
Sass 设置颜色函数
| 函数 | 描述 & 示例 |
|---|---|
| rgb(red, green, blue) | 使用红-绿-蓝（RGB）模型设置颜色。RGB 颜色值使用以下方式指定：rgb(red, green, blue)。每个参数定义了该颜色的强度，可以是 0 到 255 之间的整数，或者百分比值（从 0% 到 100%）。 示例 rgb(0, 0, 255); // 渲染为蓝色，因为 blue 参数设置为最高值（255），而其他参数设置为 0。 |
| rgba(red, green, blue, alpha) | 使用红-绿-蓝-阿尔法（RGBA）模型设置颜色。RGBA 颜色值是 RGB 颜色值的扩展，包含一个 alpha 通道——它指定颜色的不透明度。alpha 参数是一个介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。 示例 rgba(0, 0, 255, 0.3); // 渲染为带有透明度的蓝色 |
| hsl(色相, 饱和度, 亮度) | 使用色相-饱和度-亮度（HSL）模型设置颜色——它表示颜色的圆柱坐标表示。色相是色轮上的一个角度（从 0 到 360）——0 或 360 是红色，120 是绿色，240 是蓝色。饱和度是一个百分比值；0% 表示灰色，100% 表示全色。亮度也是一个百分比；0% 是黑色，100% 是白色。 示例 hsl(120, 100%, 50%); // 绿色 hsl(120, 100%, 75%); // 浅绿色 hsl(120, 100%, 25%); // 深绿色 hsl(120, 60%, 70%); // 粉彩色绿色 |
| hsla(hue, saturation, lightness, alpha) | 使用色相-饱和度-亮度-阿尔法（HSLA）模型设置颜色。HSLA 颜色值是 HSL 颜色值的扩展，包含一个 alpha 通道——它指定颜色的不透明度。alpha 参数是一个介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。 示例 hsl(120, 100%, 50%, 0.3); // 带透明度的绿色 hsl(120, 100%, 75%, 0.3); // 带透明度的浅绿色 |
| grayscale(color) | 设置与 color 具有相同亮度的灰色。 示例 grayscale(#7fffd4); 结果：#c6c6c6 |
| complement(color) | 设置与 color 互补的颜色。 示例 complement(#7fffd4); 结果：#ff7faa |
| invert(color, weight) | 设置 color 的反色或负色。weight 参数是可选的，必须是 0% 到 100% 之间的数字。默认为 100%。 示例 invert(white); 结果：black |
Sass 获取颜色函数
| 函数 | 描述 & 示例 |
|---|---|
| red(color) | 返回 color 的红色值，范围是 0 到 255 的数字。 示例 red(#7fffd4); 结果：127 red(red); 结果：255 |
| green(color) | 返回 color 的绿色值，范围是 0 到 255 的数字。 示例 green(#7fffd4); 结果：255 green(blue); 结果：0 |
| blue(color) | 返回 color 的蓝色值，范围是 0 到 255 的数字。 示例 blue(#7fffd4); 结果：212 blue(blue); 结果：255 |
| hue(color) | 返回 color 的色相值，范围是 0deg 到 360deg。 示例 hue(#7fffd4); 结果：160deg |
| saturation(color) | 返回 color 的 HSL 饱和度值，范围是 0% 到 100%。 示例 saturation(#7fffd4); 结果：100% |
| lightness(color) | 返回 color 的 HSL 亮度值，范围是 0% 到 100%。 示例 lightness(#7fffd4); 结果：74.9% |
| alpha(color) | 返回 color 的 alpha 通道值，范围是 0 到 1。 示例 alpha(#7fffd4); 结果： 1 |
| opacity(color) | 返回 color 的 alpha 通道值，范围是 0 到 1。 示例 opacity(rgba(127, 255, 212, 0.5)); 结果：0.5 |
Sass 操作颜色函数
| 函数 | 描述 & 示例 |
|---|---|
| mix(color1, color2, weight) | 创建 color1 和 color2 混合的颜色。weight 参数必须是 0% 到 100% 之间。较大的权重表示使用更多的 color1。较小的权重表示使用更多的 color2。默认为 50%。 |
| adjust-hue(color, degrees) | 将 color 的色相调整 -360deg 到 360deg 的度数。 示例 adjust-hue(#7fffd4, 80deg); 结果：#8080ff |
| adjust-color(color, red, green, blue, hue, saturation, lightness, alpha) | 通过指定的值调整一个或多个参数。此函数将指定量加到现有颜色值或从其减去。 示例 adjust-color(#7fffd4, blue: 25); 结果 |
| change-color(color, red, green, blue, hue, saturation, lightness, alpha) | 将 color 的一个或多个参数设置为新值。 示例 change-color(#7fffd4, red: 255); 结果：#ffffd4 |
| scale-color(color, red, green, blue, saturation, lightness, alpha) | 缩放 color 的一个或多个参数。 |
| rgba(color, alpha) | 使用给定的 alpha 通道创建 color 的新颜色。 示例 rgba(#7fffd4, 30%); 结果：rgba(127, 255, 212, 0.3) |
| lighten(color, amount) | 创建 color 更亮的颜色，amount 在 0% 到 100% 之间。amount 参数将 HSL 亮度增加该百分比。 |
| darken(color, amount) | 创建 color 更暗的颜色，amount 在 0% 到 100% 之间。amount 参数将 HSL 亮度减少该百分比。 |
| saturate(color, amount) | 创建 color 更饱和的颜色，amount 在 0% 到 100% 之间。amount 参数将 HSL 饱和度增加该百分比。 |
| desaturate(color, amount) | 创建 color 不那么饱和的颜色，amount 在 0% 到 100% 之间。amount 参数将 HSL 饱和度减少该百分比。 |
| opacify(color, amount) | 创建 color 更不透明的颜色，amount 在 0 到 1 之间。amount 参数将 alpha 通道增加该量。 |
| fade-in(color, amount) | 创建 color 更不透明的颜色，amount 在 0 到 1 之间。amount 参数将 alpha 通道增加该量。 |
| transparentize(color, amount) | 创建 color 更透明的颜色，amount 在 0 到 1 之间。amount 参数将 alpha 通道减少该量。 |
| fade-out(color, amount) | 创建 color 更透明的颜色，amount 在 0 到 1 之间。amount 参数将 alpha 通道减少该量。 |
