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