- 語言特性
- 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%; |
廣告