在 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 >> #c82858 //根據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() 函數在實際中的運用。
RGB顏色函數-RGBA()函數
2、rgba() 函數主要用來將一個顏色根據透明度轉換成 rgba 顏色。
其語法有兩種格式：
rgba($red,$green,$blue,$alpha) //將一個rgba顏色轉譯出來，和未轉譯的值一樣 rgba($color,$alpha) //將一個Hex顏色轉換成rgba顏色
其中 rgba($color,$alpha) 函數作用更大，主要運用在這樣的情形之中：假設在實際中知道的顏色值是 #f36 或者 red，但在使用中，需要給他們配上一個透明度，這個時候在原來的 CSS 中，首先需要通過制圖工具，得到 #f36 或 red 顏色的 R、G、B 值，而不能直接使用（注意 css3 是可以的，但是存在瀏覽器兼容問題）：
//CSS color: rgba(#f36,.5); //在css中，這是無效的寫法
但在 Sass 中，RGBA() 函數就能解決這個問題。我們先來看一個簡單的例子，假設在變量中定義了一個基本的變量：
$color: #f36; $bgColor: orange; $borderColor:green;
同時給他們加上 .5 的透明度：
//SCSS .rgba { color: rgba(#f36,.5); background: rgba(orange,.5); border-color: rgba(green,.5); }
語法：
在這個實例中，我們使用了 Sass 的 rgba 函數，在括號是函數的參數，第一個參數是需要轉換的顏色，他可以是任何顏色的表達方式，也可以是一個顏色變量；第二個參數是顏色的透明度，其值是 0~1 之間。上面的代碼轉譯出來：
.rgba { color: rgba(255, 51, 102, 0.5); background: rgba(255, 165, 0, 0.5); border-color: rgba(0, 128, 0, 0.5); }
在來看一個調用前面定義的變量：
//SCSS .rgba { color: rgba($color,.5); background: rgba($bgColor,.5); border-color: rgba($borderColor,.5); }
編譯出來的 css 代碼：
//CSS .rgba { color: rgba(255, 51, 102, 0.5); background: rgba(255, 165, 0, 0.5); border-color: rgba(0, 128, 0, 0.5); }
我想您應該會看到一個變化，通過 rgba 函數，指定一個透明值，將原色轉換成另外一個顏色：
RGB顏色函數-Red()、Green()、Blue()函數
3、Red() 函數
red() 函數非常簡單，其主要用來獲取一個顏色當中的紅色值。假設有一個 #f36 的顏色，如果你想得到 #f36 中的 red 值是多少，這個時候使用 red() 函數就能很簡單獲取。
>> red(#f36) 255
得到的值是”255”。（注意：在命令終端要先輸入sass -i 命令）
4、Green() 函數
green() 函數和 red() 函數一樣，用來獲取某一個顏色值中 green 的值。同樣拿 ”#f36“ 顏色為例：
>> green(#f36) 51
5、Blue() 函數
同理，blue() 函數是用來獲取某一個顏色值中 blue 的值，如：
>> blue(#f36) 102
RGB顏色函數-Mix()函數
Mix 函數是將兩種顏色根據一定的比例混合在一起，生成另一種顏色。其使用語法如下：
mix($color-1,$color-2,$weight);
$color-1 和 $color-2 指的是你需要合並的顏色，顏色可以是任何表達式，也可以是顏色變量。
$weight 為 合並的比例（選擇權重），默認值為 50%，其取值范圍是 0~1 之間。它是每個 RGB 的百分比來衡量，當然透明度也會有一定的權重。默認的比例是 50%，這意味着兩個顏色各占一半，如果指定的比例是 25%，這意味着第一個顏色所占比例為 25%，第二個顏色所占比例為75%。
其使用方法也很簡單：
mix(#f00, #00f) => #7f007f mix(#f00, #00f, 25%) => #3f00bf mix(rgba(255, 0, 0, 0.5), #00f) => rgba(63, 0, 191, 0.75)
在前面的基礎上，做一個修改：
//SCSS $color1: #a63; $color2: #fff; $bgColor1: #f36; $bgColor2: #e36; $borderColor1:#c36; $borderColor2:#b36; .mix { background: mix($bgColor1,$bgColor2,.75); color: mix($color1,$color2,.25); border-color: mix($borderColor1,$bgColor2,.05); }
編譯的 css 代碼：
//CSS .mix { background: #ee3366; color: #fefefe; border-color: #ed33 }
看下對比效果：
這就是 Mix 函數的工作原理，在函數中指定三個函數，前兩個函數是你想混合的顏色（記住，你可以通過顏色變量、十六進制、RGBA、RGB、HSL 或者 HSLA 顏色值）。第三個參數是第一種顏色的比例值。
