亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
收藏(0) 分享
Sass 教程 / 顏色

顏色

Sass 顏色函數(shù)

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

Sass 設(shè)置顏色函數(shù)

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

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

實例：

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

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

實例：

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

使用 Hue-Saturation-Lightness 模型設(shè)置顏色 - 并代表顏色的圓柱坐標(biāo)表示。
Hue（色調(diào)）是色輪上的度數(shù)（從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) 模型設(shè)置顏色。
HSLA 顏色值是 HSL 顏色值的擴展，帶有 alpha 通道 - 指定顏色的不透明度。
alpha 參數(shù)是介于 0.0（完全透明）和 1.0（完全不透明）之間的數(shù)字。

實例：

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

grayscale(color)

設(shè)置與顏色具有相同亮度的灰色。

實例：

grayscale(#7fffd4);

結(jié)果：#c6c6c6
complement(color)

設(shè)置顏色的互補色。

實例：

complement(#7fffd4);

結(jié)果：#ff7faa
invert(color, weight)

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

實例：

invert(white);

結(jié)果：black

Sass 獲取顏色函數(shù)

函數(shù) 描述 & 例子
red(color)

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

實例：

red(#7fffd4);

結(jié)果：127

red(red);

結(jié)果：255
green(color)

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

實例：

green(#7fffd4);

結(jié)果：255

green(blue);

結(jié)果：0
blue(color)

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

實例：

blue(#7fffd4);

結(jié)果：212

blue(blue);

結(jié)果：255
hue(color)

以 0deg 到 360deg 之間的數(shù)字形式返回顏色的色調(diào)。

實例：

hue(#7fffd4);

結(jié)果：160deg
saturation(color)

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

實例：

saturation(#7fffd4);

結(jié)果：100%
lightness(color)

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

實例：

lightness(#7fffd4);

Result: 74.9%
alpha(color)

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

實例：

alpha(#7fffd4);

Result: 1
opacity(color)

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

實例：

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

Result: 0.5

Sass 操作顏色函數(shù)

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

創(chuàng)建顏色 1 和顏色 2 的混合顏色。
weight 參數(shù)必須介于 0% 和 100% 之間。默認值為 50%。
較大的權(quán)重意味著應(yīng)該使用更多的 color1。
較小的權(quán)重意味著應(yīng)該使用更多的 color2。

adjust-hue(color, degrees)

以 -360 度到 360 度的度數(shù)調(diào)整顏色的色調(diào)。

實例：

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

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

按指定量調(diào)整一個或多個參數(shù)。
此函數(shù)在現(xiàn)有顏色值中添加或減去指定的量。

實例：

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

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

將顏色的一個或多個參數(shù)設(shè)置為新值。

實例：

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

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

使用給定的 alpha 通道創(chuàng)建新顏色。

實例：

rgba(#7fffd4, 30%);

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