Sass 顏色函數

Sass 顏色函數

我們將 Sass 中的顏色函數分為三部分：設置顏色函數、獲取顏色函數和操作顏色函數：

Sass 設置顏色函數

函數 描述 & 例子
rgb(red, green, blue)

使用 Red-Green-Blue (RGB) 模型設置顏色。
通過 rgb(red, green, blue) 指定 RGB 顏色值。
每個參數定義該顏色的強度，可以是 0 到 255 之間的整數，也可以是百分比值（從 0% 到 100%）。

實例：

rgb(0, 0, 255);
// 呈現為藍色，因為 blue 參數設置為其最高值 (255)，其他參數設置為 0
rgba(red, green, blue, alpha)

使用 Red-Green-Blue-Alpha (RGBA) 模型設置顏色。
RGBA 顏色值是帶有 alpha 通道的 RGB 顏色值的擴展 - 該通道指定顏色的不透明度。
alpha 參數是介于 0.0（完全透明）和 1.0（完全不透明）之間的數字。

實例：

rgba(0, 0, 255, 0.3); // 呈現為有透明度的藍色
hsl(hue, saturation, lightness)

使用 Hue-Saturation-Lightness 模型設置顏色 - 并代表顏色的圓柱坐標表示。
Hue（色調）是色輪上的度數（從0到360）- 0或360是紅色，120是綠色，240是藍色
Saturation（飽和度）是百分比值； 0% 表示灰色陰影，100% 表示全彩。
Lightness（亮度）也是百分比；0% 是黑色，100% 是白色。

實例：

hsl(120, 100%, 50%); // 綠色
hsl(120, 100%, 75%); // 淺綠色
hsl(120, 100%, 25%); // 深綠色
hsl(120, 60%, 70%); // 淡綠色

hsla(hue, saturation, lightness, alpha)

使用 Hue-Saturation-Lightness-Alpha (HSLA) 模型設置顏色。
HSLA 顏色值是 HSL 顏色值的擴展，帶有 alpha 通道 - 指定顏色的不透明度。
alpha 參數是介于 0.0（完全透明）和 1.0（完全不透明）之間的數字。

實例：

hsl(120, 100%, 50%, 0.3); // 帶不透明度的綠色
hsl(120, 100%, 75%, 0.3); // 帶不透明度的淺綠色

grayscale(color)

設置與顏色具有相同亮度的灰色。

實例：

grayscale(#7fffd4);

結果：#c6c6c6
complement(color)

設置顏色的互補色。

實例：

complement(#7fffd4);

結果：#ff7faa
invert(color, weight)

設置顏色的反色或負色。
weight參數是可選的，必須是介于 0% 和 100% 之間的數字。默認值為100%。

實例：

invert(white);

結果：black

Sass 獲取顏色函數

函數 描述 & 例子
red(color)

以 0 到 255 之間的數字返回顏色的紅色值。

實例：

red(#7fffd4);

結果：127

red(red);

結果：255
green(color)

以 0 到 255 之間的數字返回顏色的綠色值。

實例：

green(#7fffd4);

結果：255

green(blue);

結果：0
blue(color)

以 0 到 255 之間的數字返回顏色的藍色值。

實例：

blue(#7fffd4);

結果：212

blue(blue);

結果：255
hue(color)

以 0deg 到 360deg 之間的數字形式返回顏色的色調。

實例：

hue(#7fffd4);

結果：160deg
saturation(color)

以 0% 到 100% 之間的數字形式返回顏色的 HSL 飽和度。

實例：

saturation(#7fffd4);

結果：100%
lightness(color)

以 0% 到 100% 之間的數字形式返回顏色的 HSL 亮度。

實例：

lightness(#7fffd4);

Result: 74.9%
alpha(color)

以 0 到 1 之間的數字返回顏色的 Alpha 通道。

實例：

alpha(#7fffd4);

Result: 1
opacity(color)

以 0 到 1 之間的數字返回顏色的 Alpha 通道。

實例：

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

Result: 0.5

Sass 操作顏色函數

函數 描述 & 例子
mix(color1, color2, weight)

創建顏色 1 和顏色 2 的混合顏色。
weight 參數必須介于 0% 和 100% 之間。默認值為 50%。
較大的權重意味著應該使用更多的 color1。
較小的權重意味著應該使用更多的 color2。

adjust-hue(color, degrees)

以 -360 度到 360 度的度數調整顏色的色調。

實例：

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

Result: #8080ff
adjust-color(color, red, green, blue, hue, saturation, lightness, alpha)

按指定量調整一個或多個參數。
此函數在現有顏色值中添加或減去指定的量。

實例：

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

Result:
change-color(color, red, green, blue, hue, saturation, lightness, alpha)

將顏色的一個或多個參數設置為新值。

實例：

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

Result: #ffffd4
scale-color(color, red, green, blue, saturation, lightness, alpha) 縮放一個或多個顏色參數。
rgba(color, alpha)

使用給定的 alpha 通道創建新顏色。

實例：

rgba(#7fffd4, 30%);

Result: rgba(127, 255, 212, 0.3)
lighten(color, amount) 使用介于 0% 和 100% 之間的量創建更淺的顏色。
amount 參數按百分比提高 HSL 亮度。
darken(color, amount) 使用介于 0% 到 100% 之間的量創建更深的顏色。
amount 參數按百分比降低 HSL 亮度。
saturate(color, amount) 使用介于 0% 和 100% 之間的量創建更飽和的顏色。
amount 參數按百分比提高 HSL 飽和度。
desaturate(color, amount) 使用介于 0% 和 100% 之間的量創建飽和度較低的顏色。
amount 參數按百分比降低 HSL 飽和度。
opacify(color, amount) 使用介于 0 和 1 之間的數量創建更不透明的顏色。
amount 參數按照其值提高 Alpha 通道。
fade-in(color, amount) 使用介于 0 和 1 之間的數量創建更不透明的顏色。
amount 參數按照其值降低 Alpha 通道。
transparentize(color, amount) 使用介于 0 和 1 之間的數量創建更透明的顏色。
amount 參數按照其值降低 Alpha 通道。
fade-out(color, amount) 使用介于 0 和 1 之間的數量創建更透明的顏色。
amount 參數按照其值提高 Alpha 通道。