RGB()顏色函數

R：red(紅色)、G：green(綠色)、B：blue(藍色)。

在SASS中有以下６種RGB函數：

1. rgb($red,$green,$blue)：根據紅、綠、藍三個值創建一個顏色。

// scss //
a{
    color:rgb(20,40,60);
}

｜　編譯後：依照r:20,g:40,b:60計算出一個十六進制顏色值 #14283c。
Ｖ

// css //
a {
  color: #14283c;
}

2. rgba($red,$green,$blue,$alpha)：根據紅、綠、藍和透明度值創建一個顏色。

// scss //
a{
    color:rgba(20,40,60,87%)：
}

｜　編譯後：依照r:20,g:40,b:60,a:87%計算出rgba(20, 40, 60, 0.87)。
Ｖ

// css //
a {
  color: rgba(20, 40, 60, 0.87) ;
}

3. red($color)：從一個顏色中獲取其中紅色值。

// scss //
a{
    Red:red(#14283c);
}

｜　編譯後：從#14283c顏色值中得到红色值 20。
Ｖ

// css //
a {
  Red: 20;
}

4. green($color)：從一個顏色中獲取其中綠色值。

// scss //
a{
    Green:green(#14283c);
}

｜　編譯後：從#14283c顏色值中得到綠色值 40。
Ｖ

// css //
a {
  Green: 40;
}

5. blue($color)：從一個顏色中獲取其中藍色值。

// scss //
a{
    Blue:blue(#14283c);
}

｜　編譯後：從#14283c顏色值中得到藍色值 60。
Ｖ

// css //
a {
  Blue: 60;
}

6. mix($color-1,$color-2,[$weight])：把兩種顏色混合在一起。$weight代表著混合比例，如設定87%，則color-1為87%，反之color-2為13%。

// scss //
a{
    color:mix(#14283c,rgba(200,140,80,87%),50%);
}

｜　編譯後：把#14283c和rgba(200,140,80,87%)按比例混合得到rgba(98, 84, 69, 0.935)。
Ｖ

// css //
a {
  color: rgba(98, 84, 69, 0.935);
}

Opacity()函數

控制整個元素的透明度。

在SASS中有以下４種Opacity函數：

1. alpha($color) /opacity($color)：獲取顏色透明度值。若顏色沒有特別指定透明度，那麼這兩個函數得到的值都會是１。

// scss //
a{
    Alpha:alpha(#14283c);
}

b{
    Opacity:opacity(rgba(#14283c,87%));
}

｜　編譯後
Ｖ

// css //
a {
  Alpha: 1;
}

b {
  Opacity: 0.87;
}

2. rgba($color, $alpha)：改變顏色的透明度值。$color為顏色，$alpha為顏色透明值。

// scss //
a{
    Color:rgba(red,87%)
}

b{
    Color:rgba(#14283c,87%)
}

｜　編譯後
Ｖ

// css //
a {
  Color: rgba(255, 0, 0, 0.87);
}

b {
  Color: rgba(20, 40, 60, 0.87);
}

3. opacify($color, $amount) / fade-in($color, $amount)：對已有顏色的透明度做一個加法運算，使顏色更不透明。$color是原始顏色，$amount是需要增加的透明度值，其取值範圍主要是在０～１之間。當透明度值增加到大於１時，會以１計算，表示顏色不具有任何透明度。

// scss //
a{
    Opacify:opacify(rgba(20,40,60,.87),.20)
}

b{
    Fade-in:fade-in(#14283c,.90);
}

｜　編譯後
Ｖ

// css //
a {
  Opacify: #14283c;
}

b {
  Fade-in: #14283c;
}

4. transparentize($color, $amount) / fade-out($color, $amount)：對已有顏色的透明度做一個做減法運算，當計算出來的結果小於０時會以０計算，表示全透明。

// scss //
a{
    Transparentize:transparentize(rgba(20,40,60,.87),.20)
}

b{
    Fade-out:fade-out(#14283c,.90);
}

｜　編譯後
Ｖ

// css //
a {
  Transparentize: rgba(20, 40, 60, 0.67);
}

b {
  Fade-out: rgba(20, 40, 60, 0.1);
}