LESS - Chức năng kênh màu

Trong chương này, chúng ta sẽ hiểu tầm quan trọng của Chức năng kênh màu trong LESS. LESS hỗ trợ một số chức năng tích hợp đặt giá trị cho một kênh. Kênh đặt giá trị tùy thuộc vào định nghĩa màu. Màu HSL có kênh màu, độ bão hòa và độ sáng và màu RGB có kênh màu đỏ, xanh lục và xanh lam. Bảng sau liệt kê tất cả các chức năng của kênh màu:

Sr.No. Mô tả chức năng Thí dụ
1

hue

Trong không gian màu HSL, kênh màu được trích xuất khỏi đối tượng màu.

background: hue(hsl(75, 90%, 30%));

Nó biên dịch trong CSS như hình dưới đây -

background: 75;
2

saturation

Trong không gian màu HSL, kênh bão hòa được trích xuất khỏi đối tượng màu.

background: saturation(hsl(75, 90%, 30%));

Nó biên dịch trong CSS như hình dưới đây -

background: 90%;
3

lightness

Trong không gian màu HSL, kênh đậm nhạt được trích xuất khỏi đối tượng màu.

background: lightness(hsl(75, 90%, 30%));

Nó biên dịch trong CSS như hình dưới đây -

background: 30%;
4

hsvhue

Trong không gian màu HSV, kênh màu được trích xuất khỏi đối tượng màu.

background: hsvhue(hsv(75, 90%, 30%));

Nó biên dịch trong CSS như hình dưới đây -

background: 75;
5

hsvsaturation

Trong không gian màu HSL, kênh bão hòa được trích xuất khỏi đối tượng màu.

background: hsvsaturation(hsv(75, 90%, 30%));

Nó biên dịch trong CSS như hình dưới đây -

background: 90%;
6

hsvvalue

Trong không gian màu HSL, kênh giá trị được trích xuất khỏi đối tượng màu.

background: hsvvalue(hsv(75, 90%, 30%));

Nó biên dịch trong CSS như hình dưới đây -

background: 30%;
7

red

Kênh màu đỏ được trích xuất khỏi đối tượng màu.

background: red(rgb(5, 15, 25));

Nó biên dịch trong CSS như hình dưới đây -

background: 5;
số 8

green

Kênh màu xanh lá cây được trích xuất khỏi đối tượng màu.

background: green(rgb(5, 15, 25));

Nó biên dịch trong CSS như hình dưới đây -

background: 15;
9

blue

Kênh màu xanh lam được trích xuất khỏi đối tượng màu.

background: blue(rgb(5, 15, 25));

Nó biên dịch trong CSS như hình dưới đây -

background: 25;
10

alpha

Kênh alpha được trích xuất khỏi đối tượng màu.

background: alpha(rgba(5, 15, 25, 1.5));

Nó biên dịch trong CSS như hình dưới đây -

background: 2;
11

luma

Giá trị luma được tính từ một đối tượng màu.

background: luma(rgb(50, 250, 150));

Nó biên dịch trong CSS như hình dưới đây -

background: 71.2513323%;
12

luminance

Giá trị luma được tính mà không cần hiệu chỉnh gamma.

background: luminance(rgb(50, 250, 150));

Nó biên dịch trong CSS như hình dưới đây -

background: 78.53333333%;