Sass 颜色函数

Sass 颜色函数

我们将 Sass 中的颜色函数分为三部分：设置颜色函数、获取颜色函数和操作颜色函数：

Sass 设置颜色函数

函数 描述 & 例子
rgb(red, green, blue)

使用 Red-Green-Blue (RGB) 模型设置颜色。
通过 rgb(red, green, blue) 指定 RGB 颜色值。
每个参数定义该颜色的强度，可以是 0 到 255 之间的整数，也可以是百分比值（从 0% 到 100%）。

实例：

rgb(0, 0, 255);
// 呈现为蓝色，因为 blue 参数设置为其最高值 (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 模型设置颜色 - 并代表颜色的圆柱坐标表示。
Hue（色调）是色轮上的度数（从0到360）- 0或360是红色，120是绿色，240是蓝色
Saturation（饱和度）是百分比值； 0% 表示灰色阴影，100% 表示全彩。
Lightness（亮度）也是百分比；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)

设置与颜色具有相同亮度的灰色。

实例：

grayscale(#7fffd4);

结果：#c6c6c6
complement(color)

设置颜色的互补色。

实例：

complement(#7fffd4);

结果：#ff7faa
invert(color, weight)

设置颜色的反色或负色。
weight参数是可选的，必须是介于 0% 和 100% 之间的数字。默认值为100%。

实例：

invert(white);

结果：black

Sass 获取颜色函数

函数 描述 & 例子
red(color)

以 0 到 255 之间的数字返回颜色的红色值。

实例：

red(#7fffd4);

结果：127

red(red);

结果：255
green(color)

以 0 到 255 之间的数字返回颜色的绿色值。

实例：

green(#7fffd4);

结果：255

green(blue);

结果：0
blue(color)

以 0 到 255 之间的数字返回颜色的蓝色值。

实例：

blue(#7fffd4);

结果：212

blue(blue);

结果：255
hue(color)

以 0deg 到 360deg 之间的数字形式返回颜色的色调。

实例：

hue(#7fffd4);

结果：160deg
saturation(color)

以 0% 到 100% 之间的数字形式返回颜色的 HSL 饱和度。

实例：

saturation(#7fffd4);

结果：100%
lightness(color)

以 0% 到 100% 之间的数字形式返回颜色的 HSL 亮度。

实例：

lightness(#7fffd4);

Result: 74.9%
alpha(color)

以 0 到 1 之间的数字返回颜色的 Alpha 通道。

实例：

alpha(#7fffd4);

Result: 1
opacity(color)

以 0 到 1 之间的数字返回颜色的 Alpha 通道。

实例：

opacity(rgba(127, 255, 212, 0.5));

Result: 0.5

Sass 操作颜色函数

函数 描述 & 例子
mix(color1, color2, weight)

创建颜色 1 和颜色 2 的混合颜色。
weight 参数必须介于 0% 和 100% 之间。默认值为 50%。
较大的权重意味着应该使用更多的 color1。
较小的权重意味着应该使用更多的 color2。

adjust-hue(color, degrees)

以 -360 度到 360 度的度数调整颜色的色调。

实例：

adjust-hue(#7fffd4, 80deg);

Result: #8080ff
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha)

按指定量调整一个或多个参数。
此函数在现有颜色值中添加或减去指定的量。

实例：

adjust-color(#7fffd4, blue: 25);

Result:
change-color(color, red, green, blue, hue, saturation, lightness, alpha)

将颜色的一个或多个参数设置为新值。

实例：

change-color(#7fffd4, red: 255);

Result: #ffffd4
scale-color(color, red, green, blue, saturation, lightness, alpha) 缩放一个或多个颜色参数。
rgba(color, alpha)

使用给定的 alpha 通道创建新颜色。

实例：

rgba(#7fffd4, 30%);

Result: rgba(127, 255, 212, 0.3)
lighten(color, amount) 使用介于 0% 和 100% 之间的量创建更浅的颜色。
amount 参数按百分比提高 HSL 亮度。
darken(color, amount) 使用介于 0% 到 100% 之间的量创建更深的颜色。
amount 参数按百分比降低 HSL 亮度。
saturate(color, amount) 使用介于 0% 和 100% 之间的量创建更饱和的颜色。
amount 参数按百分比提高 HSL 饱和度。
desaturate(color, amount) 使用介于 0% 和 100% 之间的量创建饱和度较低的颜色。
amount 参数按百分比降低 HSL 饱和度。
opacify(color, amount) 使用介于 0 和 1 之间的数量创建更不透明的颜色。
amount 参数按照其值提高 Alpha 通道。
fade-in(color, amount) 使用介于 0 和 1 之间的数量创建更不透明的颜色。
amount 参数按照其值降低 Alpha 通道。
transparentize(color, amount) 使用介于 0 和 1 之间的数量创建更透明的颜色。
amount 参数按照其值降低 Alpha 通道。
fade-out(color, amount) 使用介于 0 和 1 之间的数量创建更透明的颜色。
amount 参数按照其值提高 Alpha 通道。