本節咱們來看一下 Sass 中的顏色函數，顏色函數能夠分爲三部分，分別是顏色設置、顏色獲取以及顏色操做。Sass 中的顏色函數有不少，下面咱們來看一些 Sass 中經常使用的顏色函數：css
| 函數 | 描述 |
|---|---|
| rgb() | 建立一個 Red-Green-Blue（RGB） 色 |
| rgba() | 建立一個帶有透明度值的顏色 |
| hsl() | 經過色相、飽和度和亮度的值建立一個顏色 |
| hsla() | 經過色相、飽和度、亮度和透明的值建立一個顏色 |
| red() | 從一個顏色中獲取其中紅色值 |
| lightness | 獲取一個顏色的亮度值(0% - 100%) |
| alpha | 將顏色的 alpha 通道返回爲介於 0 和 1 之間的數字 |
| opacity | 獲取顏色透明度值(0-1) |
| mix() | 把兩種顏色混合起來 |
| fade-in() | 下降顏色的透明度，取值在 0-1 之。 |
| fade-out() | 提高顏色的透明度，取值在 0-1 之間。 |
rgb()函數
rgb() 函數建立一個 Red-Green-Blue（RGB） 色，其中 R 表示紅色，G表示綠色，B表示藍色。RGB的取值範圍在 0 到 255 之間。函數
示例：
這個函數咱們應該比較熟悉了，在 CSS 中設置顏色值也會用到這個函數：code
.xkd{
background: rgb(240, 236, 122);
color: rgb(15, 88, 96);
}
編譯成 CSS 代碼：ci
.xkd {
background: #f0ec7a;
color: #0f5860;
}
須要注意的是 rgb() 函數中的參數值範圍在 0 到 255 以前，不能超過 255，不然會失效。scss
rbga()函數
rbga() 函數的使用和 rgb() 函數差很少，都是用於建立顏色，可是 rgba() 中多了一個 alpha，也就是顏色透明度。顏色透明度的取值範圍爲 0 到 1 之間的小數，例如 0.1、0.2 0.3 等， 值越小顏色越透明。it
示例：
例如咱們給一個黑色設置透明度爲 0.6：io
.xkd{
background: rgba(0, 0, 0, 0.6);
color: rgb(0, 0, 0);
}
編譯成 CSS 代碼：編譯
.xkd {
background: rgba(0, 0, 0, 0.6);
color: black;
}
你們能夠本身試一下，當設置不一樣的透明度值時，會有什麼效果。通常咱們在製做網頁時，會給一些背景顏色設置透明度。table
hsl()函數
hsl() 函數能夠經過色相（hue）、飽和度(saturation)和亮度（lightness）的值建立一個顏色。class
示例：
.xkd{
color: hsl(100, 100%, 60%);
a{
color: hsl(255, 80%, 70%);
}
}
編譯成 CSS 代碼：
.xkd {
color: #77ff33;
}
.xkd a {
color: #9475f0;
}
hsla()函數
hsla() 函數能夠經過色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值建立一個顏色。
示例：
.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);
}
red()函數
red() 函數用於從一個顏色中獲取其中紅色值，取值範圍爲 0 到 255。除了 red() 函數，還有 green() 函數和 blue() 函數。
示例：
例如獲取一個顏色中的紅色值、綠色值、藍色值：
.xkd{
content: red(#fecefc);
content: green(#fecefc);
content: blue(#fecefc);
}
編譯成 CSS 代碼：
.xkd {
content: 254;
content: 206;
content: 252;
}
上述代碼中，red() 函數用於從一個顏色中獲取紅色值，同理，green() 函數用於獲取綠色值，blue() 函數用於獲取藍色值。
咱們能夠試一下在 rgb() 函數中使用這三個獲取到的數值，看看建立的顏色是否同 #fecefc 同樣：
rgb(254, 206, 252)
lightness()函數
lightness() 函數獲取一個顏色的亮度值，取值範圍爲0% 到 100%。
示例：
例如獲取不一樣顏色值的亮度：
.xkd{
content:lightness(#cccccc);
content:lightness(#ff0000);
}
編譯成 CSS 代碼：
.xkd {
content: 80%;
content: 50%;
}
根據輸出結果能夠看出，#cccccc 顏色的亮度爲 80%，#ff0000 的亮度爲 50% 。
alpha()函數
alpha() 函數將顏色的 alpha 通道返回爲介於 0 和 1 之間的數字。
示例：
.xkd{
content:alpha(pink);
content:alpha(rgba(125, 125, 125, 0.6));
}
編譯成 CSS 代碼：
.xkd {
content: 1;
content: 0.6;
}
opacity()函數
opacity() 函數用於獲取顏色透明度值，取值範圍在 0 到 1 之間。
示例：
.xkd{
content:opacity(rgba(212, 234, 124, 0.1));
content: opacity(red);
}
編譯成 CSS 代碼：
.xkd {
content: 0.1;
content: 1;
}
mix()函數
mix() 函數用於將兩種顏色混合起來，能夠組成一個新的顏色值。
示例：
例如咱們將藍色和綠色混合起來：
.xkd{
content:mix(blue, green);
}
編譯成 CSS 代碼：
.xkd {
content: #004080;
}
編譯後，組成了一個新的顏色 #004080。
fade-in()函數
fade-in() 函數下降顏色的透明度，取值在 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 變爲了 0.8。由於值越小透明度越高，反之值越大，透明度越低。
fade-out()函數
fade-out() 函數提高顏色的透明度，取值在 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，值越小越透明。