Mix 函數(shù)是將兩種顏色根據(jù)一定的比例混合在一起，生成另一種顏色。其使用語法如下：

mix($color-1,$color-2,$weight);

$color-1 和 $color-2 指的是你需要合并的顏色，顏色可以是任何表達式，也可以是顏色變量。

$weight 為 合并的比例（選擇權(quán)重），默認值為 50%，其取值范圍是 0~1 之間。它是每個 RGB 的百分比來衡量，當(dāng)然透明度也會有一定的權(quán)重。默認的比例是 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)

在前面的基礎(chǔ)上，做一個修改：

//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 函數(shù)的工作原理，在函數(shù)中指定三個函數(shù)，前兩個函數(shù)是你想混合的顏色（記住，你可以通過顏色變量、十六進制、RGBA、RGB、HSL 或者 HSLA 顏色值）。第三個參數(shù)是第一種顏色的比例值。