scss中的mix函数

mix() 函数用于混合两种颜色，并返回一种新的颜色。该函数可以根据给定的比例将两种颜色混合在一起。mix() 函数的基本语法如下：

mix($color1, $color2, $weight: null)

• $color1 和 $color2 是要混合的颜色。
• $weight 是一个可选参数，表示混合的颜色中 $color1 所占的比例。如果没有提供 $weight 参数，那么默认值为 50%，即两种颜色各占一半。

下面是一个具体的例子：

// 定义两种颜色
$color-red: red;
$color-blue: blue;

// 混合红色和蓝色，默认比例为50%
$mixed-color: mix($color-red, $color-blue);

// 输出结果应该是紫色（50% 红 + 50% 蓝）
body {
  background-color: $mixed-color;
}

如果你想改变混合的比例，可以这样做：

// 定义两种颜色
$color-red: red;
$color-blue: blue;

// 混合红色和蓝色，其中红色占70%
$mixed-color-with-weight: mix($color-red, $color-blue, 70%);

// 输出结果应该是更偏向于红色的紫色
body {
  background-color: $mixed-color-with-weight;
}

在这个例子中，通过将红色的比例设置为 70%，我们可以得到一个更偏向于红色的混合颜色。

请注意，mix() 函数还可以用于带有透明度的颜色，这时候第三个参数就显得尤为重要，因为它不仅影响颜色的比例，还会影响最终颜色的透明度。例如：

// 定义两种颜色，其中一个带有透明度
$color-red: rgba(255, 0, 0, 0.5);
$color-blue: blue;

// 混合红色和蓝色，默认比例为50%
$mixed-color-with-opacity: mix($color-red, $color-blue);

// 输出结果应该是一个带有透明度的混合颜色
body {
  background-color: $mixed-color-with-opacity;
}

在这个例子中，红色颜色定义为半透明（50% 不透明度），所以混合后的颜色也会带有一定的透明度。