Less 中的颜色通道函数有哪些?
LESS(Learner CSS)是一个基于常规 CSS 开发的预处理器，旨在帮助开发者轻松维护和自定义 CSS 代码。例如，它允许在 CSS 代码中创建变量和函数。因此，开发者无需像在常规 CSS 中那样编写重复的代码。
颜色通道函数也是 Less 的另一个重要特性，它将颜色值作为输入并返回特定颜色通道的值。
在本教程中，我们将通过示例学习 Less 中的 12 个颜色通道函数。以下是所有颜色通道函数的列表。
Red() 函数
Green() 函数
Blue() 函数
Alpha() 函数
Hue() 函数
Saturation() 函数
Brightness() 函数
Hsvhue() 函数
Hsvsaturation() 函数
Hsvvalue() 函数
Luma() 函数
Luminance() 函数
Red() 函数
red() 是我们列表中的第一个颜色通道函数。它接受一个颜色值作为参数，并返回 0 到 255 之间的值，该值表示当前颜色中红色的强度。
示例
在下面的示例中，我们将橙色的 RGB 值存储为"mycolor"变量的值。之后，我们通过传递"myclor"作为参数来调用 red() 函数，并将返回值存储在"redchannle"变量中。
在输出中，用户可以观察到"redchannle"变量的值为 255。
@mycolor: rgb(255, 165, 0);
@redchannel: red(@mycolor);
.element {
background-color: @redchannel;
}
输出
.element {
background-color: 255;
}
Green() 函数
green() 函数在我们较少颜色通道函数列表中排在第二位。它接受一个颜色值，并返回 0 到 255 之间的绿色强度。
示例
在下面的示例中，我们将 rgb 颜色值存储在"mycolor"变量中。我们始终将绿色强度作为 rgb() 方法的第二个参数。
我们使用 green() 函数从 rgb 值中获取绿色的颜色通道值，并在输出中检查它是否返回了 15。
@mycolor: rgb(0, 15, 0);
@greenchannel: green(@mycolor);
.element {
color: @greenchannel;
}
输出
.element {
color: 15;
}
Blue() 函数
blue() 函数返回与作为参数传递的颜色相关的蓝色通道的值。
用户可以按照以下示例在 Less 中使用 blue() 函数。
示例
这里，我们将"#FF5733"十六进制颜色值作为 blue() 函数的参数传递，它是橙色的一种色调。
输出显示蓝色通道的值 51，表示特定颜色中蓝色的强度为 51。
@bluechannel: blue(#FF5733);
.output {
color: @bluechannel;
}
输出
.output {
background-color: 51;
}
Alpha() 函数
顾名思义，alpha() 函数用于获取当前颜色的不透明度，代表 Alpha 通道值。
在 rgba() 颜色格式中，我们将 Alpha 值作为最后一个参数传递。
示例
以下示例中的 'color' 变量存储的是 rgba 颜色值。这里，我们将 '0.9' 作为 rgba 格式中的 Alpha 通道值传递。
我们使用 alpha() 函数获取 'color' 的不透明度，它返回 0.9，我们可以在输出中看到。
@color: rgba(25, 77, 91, 0.9);
@alphachannel: alpha(@color);
.output {
opacity: @alphachannel;
}
输出
.output {
opacity: 0.9;
}
Hue() 函数
hue() 函数用于获取特定颜色的色相值。它返回该颜色在色轮上的色相角，其值介于 0 到 360 之间。
示例
在示例中，我们将 rgb 值存储在"color"变量中。之后，我们使用 hue() 函数获取当前颜色的色相值。
我们在使用 hsl() 定义颜色时使用了色相值。 hue() 函数返回 rgb(34, 9, 0) 颜色值 16。
@color: rgb(34, 9, 0);
@huevalue: hue(@color);
.element {
color: hsl(@huevalue, 100%, 50%);
}
输出
.element {
color: hsl(16, 100%, 50%);
}
Saturation() 函数
saturation() 函数返回作为参数传递的颜色的饱和度值，范围在 0 到 100% 之间。
示例
在此示例中，我们取 rgb(34, 9, 76) 颜色来获取其饱和度值。这里，我们在 hsl() 方法中执行了 saturation() 函数来获取当前颜色的饱和度值。
在输出中，我们可以观察到它返回的饱和度值为 78.8%
@color: rgb(34, 9, 76);
.element {
color: hsl(21, saturation(@color), 50%);
}
输出
.element {
color: hsl(21, 78.8%, 50%);
}
Brightness() 函数
brightness() 函数用于获取特定函数的亮度。它返回介于 0% 到 100% 之间的值。
示例
这里，我们获取 rgb(34, 9, 76) 颜色的亮度值，并在使用 hsl() 方法定义其他颜色时使用该值。在输出中，用户可以观察到 brightness() 方法返回 16.7% 的值。
@color: rgb(34, 9, 76);
.element {
color: hsl(21, 78.8%, brightness(@color));
}
输出
.element {
color: hsl(21, 78.8%, 16.7%);
}
Hsvhue() 函数
hsvhue() 函数用于获取 hsv 颜色模型中的色相值。
示例
在本例中，我们使用 hsvhue() 函数获取 hsv 模型中的色相值，该函数返回 0 到 360 之间的值。在输出中，我们可以观察到它返回的颜色值为 16。
@ hsvhueValue: hsvhue(rgb(255, 87, 51);
.demo {
background-color: hsv(@hsvhueValue, 70%,60%);
}
输出
.demo {
background-color: hsv(16, 70%, 60%);
}
Hsvsaturation() 函数
hssaturation() 函数用于获取 hsv 颜色模型中的饱和度值。
示例
在此示例中，我们通过将颜色值作为参数传递来使用 hsvsaturation() 函数。在输出中，我们可以看到它返回了 100% 饱和度。
@hsvsaturationValue: hsvsaturation(rgb(255, 87, 51);
.demo {
background-color: hsv(65, @hsvsaturationValue,80%);
}
输出
.demo {
background-color: hsv(65, 100%, 80%);
}
Hsvvalue() 函数
hsvalue() 函数用于获取 hsv 颜色模型中的亮度值。
示例
这里，我们使用了 hsvvalue() 函数来获取 hsv 模型中颜色的亮度。它返回 100%，我们可以在输出中看到。
@hsvvalue: hsvvalue(rgb(255, 87, 51);
.demo {
background-color: hsv(65, 90%, @hsvvalue);
}
输出
.demo {
background-color: hsv(65, 90%, 100%);
}
Luma() 函数
luma() 函数用于获取经过伽马校正的特定值的亮度值。它返回 1 到 100 之间的值。
示例
在下面的示例中，我们使用了 luma() 函数来获取rgb(50, 250, 150) 颜色，并进行了伽马校正。在输出中，我们可以看到它返回了 71.251% 的值。
.demo {
background: luma(rgb(50, 250, 150));
}
输出
.demo {
Background: 71.251%
}
Luminance() 函数
luminance() 函数也用于获取特定值的亮度值，但不进行 Gamma 校正。
示例
在此示例中，我们使用 luminance() 函数获取 rgb(50, 250, 150) 颜色的亮度值，且不进行 Gamma 校正。用户可以观察 luma() 和 luminance() 函数对相同颜色值的输出值之间的差异。
.demo {
background: luminance(rgb(50, 250, 150));
}
输出
.demo {
Background: 78.533 %
}
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
