- 语言特性
- LESS - 嵌套规则
- LESS - 嵌套指令和冒泡
- LESS - 运算
- LESS - 转义
- LESS - 函数
- LESS - 命名空间和访问器
- LESS - 作用域
- LESS - 注释
- LESS - 导入
- LESS - 变量
- LESS - 扩展
- LESS - Mixin
- LESS - 参数化Mixin
- LESS - Mixin作为函数
- LESS - 向Mixin传递规则集
- LESS - 导入指令
- LESS - 导入选项
- LESS - Mixin 保护
- LESS - CSS 保护
- LESS - 循环
- LESS - 合并
- LESS - 父选择器
- 函数
- LESS - 其他函数
- LESS - 字符串函数
- LESS - 列表函数
- LESS - 数学函数
- LESS - 类型函数
- LESS - 颜色定义函数
- LESS - 颜色通道函数
- LESS - 颜色运算
- LESS - 颜色混合函数
- 使用
- LESS - 命令行使用
- 在浏览器中使用LESS
- LESS - 浏览器支持
- LESS - 插件
- LESS - 程序化使用
- LESS - 在线编译器
- LESS - GUI
- LESS - 编辑器和插件
- LESS - 第三方编译器
- LESS - 框架
- LESS 有用资源
- LESS - 快速指南
- LESS - 有用资源
- LESS - 讨论
LESS - 颜色通道函数
本章我们将了解LESS中颜色通道函数的重要性。LESS支持一些内置函数来设置通道的值。通道根据颜色定义设置值。HSL颜色具有色相、饱和度和亮度通道，RGB颜色具有红色、绿色和蓝色通道。下表列出了所有颜色通道函数：
| 序号 | 函数及描述 | 示例 |
|---|---|---|
| 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 在HSL颜色空间中，提取颜色对象的饱和度通道。 |
background: hsvsaturation(hsv(75, 90%, 30%)); 它编译成如下所示的CSS： background: 90%; |
| 6 | hsvvalue 在HSL颜色空间中，提取颜色对象的明度通道。 |
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 计算luma值，不进行伽马校正。 |
background: luminance(rgb(50, 250, 150)); 它编译成如下所示的CSS： background: 78.53333333%; |
广告