LESS-カラーチャネル機能

この章では、LESSでのカラーチャネル関数の重要性を理解します。LESSは、チャネルに関する値を設定するいくつかの組み込み関数をサポートします。チャネルは、色の定義に応じて値を設定します。HSL色には色相、彩度、明度チャネルがあり、RGB色には赤、緑、青のチャネルがあります。次の表に、すべてのカラーチャネル機能を示します。


background: hue(hsl(75, 90%, 30%));
background: saturation(hsl(75, 90%, 30%));
background: lightness(hsl(75, 90%, 30%));
background: hsvhue(hsv(75, 90%, 30%));
background: hsvsaturation(hsv(75, 90%, 30%));
background: hsvvalue(hsv(75, 90%, 30%));
background: red(rgb(5, 15, 25));
background: green(rgb(5, 15, 25));
background: blue(rgb(5, 15, 25));
background: alpha(rgba(5, 15, 25, 1.5));
background: luma(rgb(50, 250, 150));
background: luminance(rgb(50, 250, 150));

シニア番号	機能と説明	例
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 アルファチャネルはカラーオブジェクトから抽出されます。	`background: alpha(rgba(5, 15, 25, 1.5));` 以下に示すようにCSSでコンパイルされます- `background: 2;`
11	luma 輝度値は、カラーオブジェクトから計算されます。	`background: luma(rgb(50, 250, 150));` 以下に示すようにCSSでコンパイルされます- `background: 71.2513323%;`
12	luminance 輝度値は、ガンマ補正なしで計算されます。	`background: luminance(rgb(50, 250, 150));` 以下に示すようにCSSでコンパイルされます- `background: 78.53333333%;`

ja/tutorial