如何在原生CSS中实现SASS的mix颜色函数

完全可以通过CSS变量、calc()结合RGB/RGBA颜色表示法实现SASS mix函数的核心功能，甚至现代浏览器已经有原生函数可以直接替代。以下分两种方案说明：

一、手动拆解通道+calc实现（兼容旧浏览器） #

SASS的mix函数本质是对两种颜色的RGB（或RGBA）各通道值按指定权重做加权计算，比如权重为w%时，每个通道的计算公式为：
混合后通道值 = 颜色1通道值 × w% + 颜色2通道值 × (100% - w%)

具体实现步骤：

1. 将需要混合的两种颜色拆解为RGB（含alpha的话加上A）通道的数值变量；
2. 定义混合权重变量（默认50，即各占一半）；
3. 用calc()计算每个通道的混合值；
4. 用rgba()组合成最终混合颜色。

代码示例：

:root {
  /* 定义两种颜色的RGB通道值 */
  --color1-r: 255; --color1-g: 0; --color1-b: 0; --color1-a: 1; /* 红色 */
  --color2-r: 0; --color2-g: 0; --color2-b: 255; --color2-a: 1; /* 蓝色 */
  
  /* 混合权重：60%偏向颜色1，40%偏向颜色2 */
  --mix-weight: 60;
}

:root {
  /* 计算混合后的各通道值 */
  --mixed-r: calc(var(--color1-r) * var(--mix-weight) / 100 + var(--color2-r) * (100 - var(--mix-weight)) / 100);
  --mixed-g: calc(var(--color1-g) * var(--mix-weight) / 100 + var(--color2-g) * (100 - var(--mix-weight)) / 100);
  --mixed-b: calc(var(--color1-b) * var(--mix-weight) / 100 + var(--color2-b) * (100 - var(--mix-weight)) / 100);
  --mixed-a: calc(var(--color1-a) * var(--mix-weight) / 100 + var(--color2-a) * (100 - var(--mix-weight)) / 100);
  
  /* 组合成最终颜色 */
  --mixed-color: rgba(var(--mixed-r), var(--mixed-g), var(--mixed-b), var(--mixed-a));
}

/* 使用混合颜色 */
.mixed-box {
  background-color: var(--mixed-color);
  width: 200px;
  height: 200px;
}

二、原生color-mix()函数（现代浏览器推荐） #

现在Chrome、Firefox、Safari等现代浏览器已经支持原生的color-mix()函数，它的行为和SASS mix高度一致，甚至支持指定颜色空间（如srgb、hsl等），无需手动拆解通道，用法更简洁：

代码示例：

.mixed-box {
  /* 混合红色和蓝色，60%偏向红色（权重默认50%，可省略） */
  background-color: color-mix(in srgb, red 60%, blue);
  
  /* 带alpha的混合示例 */
  background-color: color-mix(in srgb, rgba(255,0,0,0.5) 70%, rgba(0,0,255,0.8));
}

这个函数会自动处理颜色通道的加权计算，包括alpha通道的混合，完全满足SASS mix的需求，是最便捷的方案。

内容的提问来源于stack exchange，提问作者Vadim Kantorov