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

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 函數，指定一個透明值，將原色轉換成另外一個顏色：