Hàm màu Sass

Hàm màu Sass

Chúng ta chia các hàm màu trong Sass thành ba phần: hàm thiết lập màu, hàm lấy màu và hàm thao tác màu:

Hàm thiết lập màu Sass

Hàm điều khiển màu Sass Hàm
rgb(đỏ, xanh lục, xanh dương)

Thiết lập màu sắc bằng mô hình Red-Green-Blue (RGB).
Định nghĩa giá trị màu RGB bằng cách sử dụng rgb(red, green, blue).
Mỗi tham số định nghĩa cường độ của màu, có thể là số nguyên từ 0 đến 255 hoặc là phần trăm (từ 0% đến 100%).

Mẫu:

rgb(0, 0, 255);
// Được hiển thị với màu xanh dương, vì tham số blue được thiết lập ở giá trị cao nhất (255), các tham số khác được thiết lập thành 0
rgba(đỏ, xanh lục, xanh dương, alpha)

Đặt màu bằng mô hình Red-Green-Blue-Alpha (RGBA).
Giá trị màu RGBA là mở rộng của giá trị màu RGB có alpha channel - kênh này xác định độ trong suốt của màu.
alpha Các tham số là số từ 0.0 (hoàn toàn trong suốt) đến 1.0 (hoàn toàn không trong suốt).

Mẫu:

rgba(0, 0, 255, 0.3); // Hiển thị với độ trong suốt của màu xanh
hsl(màu sắc, màu, sáng)

Đặt màu bằng mô hình Hue-Saturation-Lightness - và đại diện cho biểu diễn tọa độ trụ của màu.
Hue (độ sắc) là độ số trên bánh xe màu (từ 0 đến 360) - 0 hoặc 360 là đỏ, 120 là xanh lá cây, 240 là xanh dương
Saturation (độ饱 vành) là giá trị phần trăm; 0% biểu thị màu xám, 100% biểu thị màu toàn màu.
Lightness (độ sáng) cũng là giá trị phần trăm; 0% là đen, 100% là trắng.

Mẫu:

hsl(120, 100%, 50%); // Màu xanh lá cây
hsl(120, 100%, 75%); // Màu xanh lá cây nhạt
hsl(120, 100%, 25%); // Màu xanh lá cây đậm
hsl(120, 60%, 70%); // Màu xanh lá cây nhạt

hsla(màu sắc, màu, sáng, alpha)

Đặt màu bằng mô hình Hue-Saturation-Lightness-Alpha (HSLA).
Giá trị màu HSLA là mở rộng của giá trị màu HSL, có alpha channel - xác định độ trong suốt của màu.
alpha Các tham số là số từ 0.0 (hoàn toàn trong suốt) đến 1.0 (hoàn toàn không trong suốt).

Mẫu:

hsl(120, 100%, 50%, 0.3); // Màu xanh lá cây có độ không mờ
hsl(120, 100%, 75%, 0.3); // Màu xanh lá cây nhạt có độ không mờ

grayscale(color)

Đặt màu xám có cùng độ sáng với màu.

Mẫu:

grayscale(#7fffd4);

Kết quả: #c6c6c6
complement(color)

Đặt màu bổ sung của màu.

Mẫu:

complement(#7fffd4);

Kết quả: #ff7faa
invert(color, Tạo màu trộn giữa màu 1 và màu 2.)

Đặt màu ngược hoặc màu âm.
Tạo màu trộn giữa màu 1 và màu 2.Các tham số là tùy chọn, phải là số từ 0% đến 100%. Giá trị mặc định là 100%.

Mẫu:

invert(white);

Kết quả: black

Hàm lấy màu Sass

Hàm điều khiển màu Sass Hàm
red(color)

Trả về giá trị đỏ của màu bằng số từ 0 đến 255.

Mẫu:

red(#7fffd4);

Kết quả: 127

red(red);

xanh dương(
green(color)

Trả về giá trị xanh của màu bằng số từ 0 đến 255.

Mẫu:

green(#7fffd4);

xanh dương(

green(blue);

结果：0
blue(color)

以 0 到 255 之间的数字返回颜色的蓝色值。

Mẫu:

blue(#7fffd4);

xanh lục(xanh dương);

Kết quả: 0

xanh dương(
xanh dương(#7fffd4);color)

Kết quả: 212

Mẫu:

xanh dương(xanh dương);

Kết quả: 255
tông màu(color)

tông màu(#7fffd4);

Mẫu:

Kết quả: 160deg

màu(
màu(#7fffd4);color)

Kết quả: 100%

Mẫu:

sáng(

sáng(#7fffd4);
Kết quả: 74.9%color)

opacity(

Mẫu:

alpha(

alpha(#7fffd4);
Kết quả: 1color)

opacity(

Mẫu:

Trả về alpha 通道 của màu dưới dạng số từ 0 đến 1.

opacity(rgba(127, 255, 212, 0.5));

Kết quả: 0.5

Hàm điều khiển màu Sass Hàm
Mô tả & ví dụcân nặng lớn hơn có nghĩa là nên sử dụng nhiều hơn, color2, Tạo màu trộn giữa màu 1 và màu 2.)

mix(
Tạo màu trộn giữa màu 1 và màu 2. weight
tham số phải nằm trong khoảng từ 0% đến 100%. Giá trị mặc định là 50%. cân nặng lớn hơn có nghĩa là nên sử dụng nhiều hơn。
Cân nặng nhỏ hơn có nghĩa là nên sử dụng nhiều hơn color2。

adjust-hue(color, độ)

Chỉnh sửa tông màu của màu từ -360 độ đến 360 độ.

Mẫu:

adjust-hue(#7fffd4, 80deg);

Kết quả: #8080ff
adjust-color(color, đỏ, xanh lục, xanh dương, màu sắc, màu, sáng, alpha)

Chỉnh sửa một hoặc nhiều tham số theo lượng được chỉ định.
Hàm này thêm hoặc bớt số lượng được chỉ định trong giá trị màu hiện có.

Mẫu:

adjust-color(#7fffd4, blue: 25);

Kết quả:
change-color(color, đỏ, xanh lục, xanh dương, màu sắc, màu, sáng, alpha)

Đặt một hoặc nhiều tham số màu của màu thành giá trị mới.

Mẫu:

change-color(#7fffd4, red: 255);

Kết quả: #ffffd4
scale-color(color, đỏ, xanh lục, xanh dương, màu, sáng, alpha) Phóng to một hoặc nhiều tham số màu.
rgba(màu, alpha)

Tạo màu mới bằng alpha通道 được cung cấp.

Mẫu:

rgba(#7fffd4, 30%);

Kết quả: rgba(127, 255, 212, 0.3)
lighten(color, amount) Tạo màu sáng hơn bằng cách sử dụng lượng từ 0% đến 100%.
amount Tham số tăng cường độ sáng HSL theo phần trăm.
darken(color, amount) Tạo màu đậm hơn bằng cách sử dụng lượng từ 0% đến 100%.
amount Tham số giảm độ sáng HSL theo phần trăm.
saturate(color, amount) Tạo màu sáng hơn bằng cách sử dụng lượng từ 0% đến 100%.
amount Tham số tăng cường độ sáng HSL theo phần trăm.
desaturate(color, amount) Tạo màu sáng hơn bằng cách sử dụng lượng từ 0% đến 100%.
amount Tham số giảm độ sáng HSL theo phần trăm.
opacify(color, amount) Tạo màu không trong suốt hơn bằng cách sử dụng số lượng từ 0 đến 1.
amount Tham số tăng cường Alpha channel theo giá trị của nó.
fade-in(color, amount) Tạo màu không trong suốt hơn bằng cách sử dụng số lượng từ 0 đến 1.
amount Tham số giảm Alpha channel theo giá trị của nó.
transparentize(color, amount) Tạo màu trong suốt hơn bằng cách sử dụng số lượng từ 0 đến 1.
amount Tham số giảm Alpha channel theo giá trị của nó.
fade-out(color, amount) Tạo màu trong suốt hơn bằng cách sử dụng số lượng từ 0 đến 1.
amount Tham số tăng cường Alpha channel theo giá trị của nó.