【CSS】11 個 Sass 中常用的顏色函數(shù)，你需要知道一下

1、rgb()函數(shù)

rgb() 函數(shù)創(chuàng)建一個 Red-Green-Blue（RGB） 色，其中 R 表示紅色，G表示綠色，B表示藍(lán)色。RGB的取值范圍在 0 到 255 之間。

示例：

這個函數(shù)我們應(yīng)該比較熟悉了，在 css 中設(shè)置顏色值也會用到這個函數(shù)：

.xkd{    background: rgb(240, 236, 122);    color: rgb(15, 88, 96);}

編譯成 css 代碼：

.xkd {  background: #f0ec7a;  color: #0f5860;}

需要注意的是 rgb() 函數(shù)中的參數(shù)值范圍在 0 到 255 之前，不能超過 255，否則會失效。

2、rbga()函數(shù)

rbga() 函數(shù)的使用和 rgb() 函數(shù)差不多，都是用于創(chuàng)建顏色，但是 rgba() 中多了一個 alpha，也就是顏色透明度。顏色透明度的取值范圍為 0 到 1 之間的小數(shù)，例如 0.1、0.2 0.3 等， 值越小顏色越透明。

示例：

例如我們給一個黑色設(shè)置透明度為 0.6：

.xkd{    background: rgba(0, 0, 0, 0.6);    color: rgb(0, 0, 0);}

編譯成 CSS 代碼：

.xkd {  background: rgba(0, 0, 0, 0.6);  color: black;}

大家可以自己試一下，當(dāng)設(shè)置不同的透明度值時，會有什么效果。一般我們在制作網(wǎng)頁時，會給一些背景顏色設(shè)置透明度。

3、hsl()函數(shù)

hsl() 函數(shù)可以通過色相（hue）、飽和度(saturation)和亮度（lightness）的值創(chuàng)建一個顏色。

示例：

.xkd{    color: hsl(100, 100%, 60%);    a{        color: hsl(255, 80%, 70%);    }}

編譯成 CSS 代碼：

.xkd {  color: #77ff33;}.xkd a {  color: #9475f0;}

4、hsla()函數(shù)

hsla() 函數(shù)可以通過色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值創(chuàng)建一個顏色。

示例：

.xkd{    color: hsla(100, 100%, 60%, 0.8);    a{        color: hsla(255, 80%, 70%, 0.3);    }}

編譯成 CSS 代碼：

.xkd {  color: rgba(119, 255, 51, 0.8);}.xkd a {  color: rgba(148, 117, 240, 0.3);}

5、red()函數(shù)

red() 函數(shù)用于從一個顏色中獲取其中紅色值，取值范圍為 0 到 255。除了 red() 函數(shù)，還有 green() 函數(shù)和 blue() 函數(shù)。

示例：

例如獲取一個顏色中的紅色值、綠色值、藍(lán)色值：

.xkd{    content: red(#fecefc);    content: green(#fecefc);    content: blue(#fecefc);}

編譯成 CSS 代碼：

.xkd {  content: 254;  content: 206;  content: 252;}

上述代碼中，red() 函數(shù)用于從一個顏色中獲取紅色值，同理，green() 函數(shù)用于獲取綠色值，blue() 函數(shù)用于獲取藍(lán)色值。

我們可以試一下在 rgb() 函數(shù)中使用這三個獲取到的數(shù)值，看看創(chuàng)建的顏色是否同 #fecefc 一樣：

rgb(254, 206, 252)

6、lightness()函數(shù)

lightness() 函數(shù)獲取一個顏色的亮度值，取值范圍為0% 到 100%。

示例：

例如獲取不同顏色值的亮度：

.xkd{    content:lightness(#cccccc);    content:lightness(#ff0000);}

編譯成 CSS 代碼：

.xkd {  content: 80%;  content: 50%;}

根據(jù)輸出結(jié)果可以看出，#cccccc 顏色的亮度為 80%，#ff0000 的亮度為 50% 。

7、alpha()函數(shù)

alpha() 函數(shù)將顏色的 alpha 通道返回為介于 0 和 1 之間的數(shù)字。

示例：

.xkd{    content:alpha(pink);    content:alpha(rgba(125, 125, 125, 0.6));}

編譯成 CSS 代碼：

.xkd {  content: 1;  content: 0.6;}

8、opacity()函數(shù)

opacity() 函數(shù)用于獲取顏色透明度值，取值范圍在 0 到 1 之間。

示例：

.xkd{    content:opacity(rgba(212, 234, 124, 0.1));    content: opacity(red);}

編譯成 CSS 代碼：

.xkd {  content: 0.1;  content: 1;}

9、mix()函數(shù)

mix() 函數(shù)用于將兩種顏色混合起來，可以組成一個新的顏色值。

示例：

例如我們將藍(lán)色和綠色混合起來：

.xkd{    content:mix(blue, green);}

編譯成 CSS 代碼：

.xkd {  content: #004080;}

編譯后，組成了一個新的顏色 #004080。

10、fade-in()函數(shù)

fade-in() 函數(shù)降低顏色的透明度，取值在 0 到 1 之間。

示例：

.xkd{    content:fade-in(rgba(100, 100, 255, 0.7), 0.1);}

編譯成 CSS 代碼：

.xkd {  content: rgba(100, 100, 255, 0.8);}

可以看到，編譯后的代碼中，透明度由原來的 0.7 變?yōu)榱?nbsp;0.8。因?yàn)橹翟叫⊥该鞫仍礁?，反之值越大，透明度越低?/span>

11、fade-out()函數(shù)

fade-out() 函數(shù)提升顏色的透明度，取值在 0 到 1 之間。

示例：

.xkd{    content:fade-out(rgba(100, 100, 255, 0.7), 0.1);}

編譯成 CSS 代碼：

.xkd {  content: rgba(100, 100, 255, 0.6);}

上述代碼中，透明度由 0.7 提升到 0.6，值越小越透明。