Sass: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 顏色值）。第三個參數是第一種顏色的比例值。