Sass 颜色函数
Sass 颜色函数
我们将 Sass 中的颜色函数分为三个部分：设置颜色函数、获取颜色函数和操作颜色函数
Sass 设置颜色函数
| 函数 | 描述 & 示例 |
|---|---|
| rgb(red, green, blue) | 使用红绿蓝 (RGB) 模型设置颜色。RGB 颜色值指定为：rgb(red, green, blue)。每个参数定义该颜色的强度，可以是 0 到 255 之间的整数，也可以是百分比值（从 0% 到 100%）。 示例 rgb(0, 0, 255); // 渲染为蓝色，因为蓝色参数设置为其最高值 (255)，而其他参数设置为 0 |
| rgba(red, green, blue, alpha) | 使用红绿蓝阿尔法 (RGBA) 模型设置颜色。RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 指定颜色的不透明度。alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。 示例 rgba(0, 0, 255, 0.3); // 渲染为具有不透明度的蓝色 |
| hsl(hue, saturation, lightness) | 使用色相饱和度亮度 (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); 结果：黑色 |
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 通道。 |
