在 Sass 的官方文檔中，列出了 Sass 的顏色函數(shù)清單，從大的方面主要分為 RGB , HSL 和 Opacity 三大函數(shù)，當(dāng)然其還包括一些其他的顏色函數(shù)，比如說 adjust-color 和 change-color 等。在這章節(jié)中，將主要和大家一起探討 Sass 顏色函數(shù)中常見的 RGB、HSL 和 Opacity 函數(shù)。

1、RGB顏色函數(shù)

RGB 顏色只是顏色中的一種表達(dá)式，其中 R 是 red 表示紅色，G 是 green 表示綠色而 B 是 blue 表示藍(lán)色。在 Sass 中為 RGB 顏色提供六種函數(shù)：

• rgb($red,$green,$blue)：根據(jù)紅、綠、藍(lán)三個(gè)值創(chuàng)建一個(gè)顏色；
• rgba($red,$green,$blue,$alpha)：根據(jù)紅、綠、藍(lán)和透明度值創(chuàng)建一個(gè)顏色；
• red($color)：從一個(gè)顏色中獲取其中紅色值；
• green($color)：從一個(gè)顏色中獲取其中綠色值；
• blue($color)：從一個(gè)顏色中獲取其中藍(lán)色值；
• mix($color-1,$color-2,[$weight])：把兩種顏色混合在一起。

僅從概念上，或許大家沒有太多的概念，我們通過下面的命令來做一個(gè)簡單的測(cè)試：

sass -i

在命令終端開啟這個(gè)命令，相當(dāng)于開啟 Sass 的函數(shù)計(jì)算。

接下來，分別在終端使用 RGB 函數(shù)來進(jìn)行計(jì)算，看其最終結(jié)果：

$ sass -i
>> rgb(200,40,88) //根據(jù)r:200,g:40,b:88計(jì)算出一個(gè)十六進(jìn)制顏色值
#c82858
>> rgba(#c82858,.65) //根據(jù)#c82858的65%透明度計(jì)算出一個(gè)rgba顏色值
rgba(200, 40, 88, 0.65)
>> red(#c82858) //從#c82858顏色值中得到紅色值 200
200
>> green(#c82858) //從#c82858顏色值中得到綠色值 40
40
>> blue(#c82858) //從#c82858顏色值中得到藍(lán)色值 88
88
>> mix(#c82858,rgba(200,40,80,.65),.3) //把#c82858和rgba(200,40,88,.65) 兩顏色按比例混合得到一個(gè)新顏色
rgba(200, 40, 80, 0.65105)

從上面的簡單運(yùn)算結(jié)果可以很清晰的知道。在 RGB 顏色函數(shù)中，在實(shí)際中常用的主要是 rgba() 和 mix() 兩個(gè)函數(shù)，而 rgb() 函數(shù)只能快速的將一個(gè) rgb 顏色轉(zhuǎn)換成十六進(jìn)制顏色表達(dá)，red()、green() 和 blue() 函數(shù)，只能取得某一顏色的一個(gè)值，對(duì)于顏色上使用并無太大作用（或許他的好處，我還沒有理解過來）。接下來，主要來實(shí)戰(zhàn)一下 rgba() 和 mix() 函數(shù)在實(shí)際中的運(yùn)用。