LESS - 颜色通道函数
在本章中,我们将了解 LESS 中颜色通道函数的重要性。LESS 支持一些内置函数,用于设置通道的值。这些通道的值取决于颜色定义。HSL 颜色具有色相(hue)、饱和度(saturation)和亮度(lightness)通道,而 RGB 颜色具有红(red)、绿(green)和蓝(blue)通道。下面的表格列出了所有颜色通道函数 —
| 序号 | 函数 & 描述 | 示例 |
|---|---|---|
| 1 | hue 在 HSL 颜色空间中,从颜色对象中提取色相通道。 |
background: hue(hsl(75, 90%, 30%)); 它编译为以下 CSS — background: 75; |
| 2 | saturation 在 HSL 颜色空间中,从颜色对象中提取饱和度通道。 |
background: saturation(hsl(75, 90%, 30%)); 它编译为以下 CSS — background: 90%; |
| 3 | lightness 在 HSL 颜色空间中,从颜色对象中提取亮度通道。 |
background: lightness(hsl(75, 90%, 30%)); 它编译为以下 CSS — background: 30%; |
| 4 | hsvhue 在 HSV 颜色空间中,从颜色对象中提取色相通道。 |
background: hsvhue(hsv(75, 90%, 30%)); 它编译为以下 CSS — background: 75; |
| 5 | hsvsaturation 在 HSV 颜色空间中,从颜色对象中提取饱和度通道。 |
background: hsvsaturation(hsv(75, 90%, 30%)); 它编译为以下 CSS — background: 90%; |
| 6 | hsvvalue 在 HSV 颜色空间中,从颜色对象中提取值通道。 |
background: hsvvalue(hsv(75, 90%, 30%)); 它编译为以下 CSS — background: 30%; |
| 7 | red 从颜色对象中提取红通道。 |
background: red(rgb(5, 15, 25)); 它编译为以下 CSS — background: 5; |
| 8 | green 从颜色对象中提取绿通道。 |
background: green(rgb(5, 15, 25)); 它编译为以下 CSS — background: 15; |
| 9 | blue 从颜色对象中提取蓝通道。 |
background: blue(rgb(5, 15, 25)); 它编译为以下 CSS — background: 25; |
| 10 | alpha 从颜色对象中提取 alpha 通道。 |
background: alpha(rgba(5, 15, 25, 1.5)); 它编译为以下 CSS — background: 2; |
| 11 | luma 从颜色对象计算 luma 值。 |
background: luma(rgb(50, 250, 150)); 它编译为以下 CSS — background: 71.2513323%; |
| 12 | luminance 不进行 gamma 校正计算 luma 值。 |
background: luminance(rgb(50, 250, 150)); 它编译为以下 CSS — background: 78.53333333%; |