RGB顏色函數-RGB()顏色函數

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

1、RGB顏色函數

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

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

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

sass -i

在命令終端開啟這個命令，相當於開啟Sass 的函數計算。

接下來，分別在終端使用RGB 函數來進行計算，看其最終結果：

$ sass -i
>> rgb(200,40,88) //根据r:200,g:40,b:88计算出一个十六进制颜色值
#c82858
>> rgba(#c82858,.65) //根据#c82858的65%透明度计算出一个rgba颜色值
rgba(200, 40, 88, 0.65)
>> red(#c82858) //从#c82858颜色值中得到红色值 200
200
>> green(#c82858) //从#c82858颜色值中得到绿色值 40
40
>> blue(#c82858) //从#c82858颜色值中得到蓝色值 88
88
>> mix(#c82858,rgba(200,40,80,.65),.3) //把#c82858和rgba(200,40,88,.65) 两颜色按比例混合得到一个新颜色
rgba(200, 40, 80, 0.65105)

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