SCSS 顏色值運算

大家知道顏色是由RGB顏色構成的，也就是紅綠藍。

表示顏色的資料也是規則的分段，由紅綠藍組成，所以顏色值的運算也是分段進行的。

[Scss] 純文字檢視 複製程式碼
p {
  color: #010203 + #040506;
}

計算可以分為以下幾段:

（1）.01 + 04 = 05。

（2）.02 + 05 = 07。

（3）.03 + 06 = 09。

最後編譯為:

[CSS] 純文字檢視 複製程式碼
p {
  color: #050709; 
}

對於顏色的操作，scss提供了大量內建函式，非常方便。

如果顏色值包含alpha channel（rgba 或 hsla 兩種顏色值），必須擁有相等的alpha值才能進行運算。

因為算術運算不會作用於 alpha 值。程式碼例項如下:

[Scss] 純文字檢視 複製程式碼
p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

編譯為css程式碼如下:

[CSS] 純文字檢視 複製程式碼
p {
  color: rgba(255, 255, 0, 0.75); 
}