Sass Color 函数
Sass 颜色函数
我们将 Sass 中的颜色函数分为三个部分：设置颜色函数、获取颜色函数和操作颜色函数:
Sass 设置颜色函数
| 函数 | 描述 & 实例 |
|---|---|
| rgb(red, green, blue) | 使用 Red-Green-Blue（RGB）模型设置颜色。RGB 颜色值由以下参数指定：rgb(red, green, blue)。每个参数定义该颜色的强度，可以是一个介于 0 和 255 之间的整数，或百分比值（从 0% 到 100%） 实例: rgb(0, 0, 255); // 渲染为蓝色，因为蓝色参数设置为其最高值（255），其他参数设置为 0 |
| rgba(red, green, blue, alpha) | 使用 Red-Green-Blue-Alpha (RGBA) 模型设置颜色。RGBA 颜色值是带有 Alpha 通道的 RGB 颜色值的扩展，该通道指定颜色的不透明度。Alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字 实例: rgba(0, 0, 255, 0.3); // 渲染为带有透明度的蓝色 |
| hsl(hue, saturation, lightness) | 使用 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) | 使用 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 获取颜色函数
| Function | 描述 & 实例 |
|---|---|
| red(color) | 以 0 到 255 之间的数字形式返回 color 颜色的红色值。 实例: red(#7fffd4); 结果: 127 red(red); 结果: 255 |
| green(color) | 以 0 到 255 之间的数字形式返回 color 颜色的绿色值。 实例: green(#7fffd4); 结果: 255 green(blue); 结果: 0 |
| blue(color) | 以 0 到 255 之间的数字形式返回 color 颜色的蓝色值。 实例: blue(#7fffd4); 结果: 212 blue(blue); 结果: 255 |
| hue(color) | 返回一个从 0 度和 360 度之间的 color 色调数值。 实例: hue(#7fffd4); 结果: 160deg |
| saturation(color) | 返回一个从 1 到 100 之间的 color HSL 饱和度数值。 实例: saturation(#7fffd4); 结果: 100% |
| lightness(color) | 返回一个从 1 到 100 之间的 color HSL 亮度数值。 实例: lightness(#7fffd4); 结果: 74。9% |
| alpha(color) | 返回一个从 0 和 1 之间的 color 的 alpha 数值。 实例: alpha(#7fffd4); 结果: 1 |
| opacity(color) | 返回一个从 0 和 1 之间的 color 的 alpha 数值。 实例: 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 的色调调整为 -360 度到 360 度。 实例: 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 减少的程度。 |