Sass安全颜色运算：color.mix与color.adjust详解

当讨论CSS原生的color-mix()函数时，需要明确几个要点：必须显式声明色彩空间（例如in srgb），且权重参数不能省略。这与mix-blend-mode的图层混合完全不同。color-mix()的核心是在计算阶段生成一个确定的颜色值，但由于浏览器支持度不一，必须提供一个静态颜色值作为降级方案。掌握Sass颜色运算中的color.mix与color.adjust的正确用法，是避免编译错误和生成非法颜色值的关键。

color.mix 在 Sass 中的实际行为和常见误解

一个流传甚广的误解需要澄清：color.mix并不是Sass的内置函数。这个名称源自Compass时代的遗留习惯。在现代Dart Sass中，对应的函数是mix()。许多开发者在升级项目后遇到“Undefined function color.mix()”的错误，根源就在于直接照搬了旧文档的写法。

正确的用法是mix($color1, $color2, $weight)。它的工作原理是按权重混合两个颜色的RGB通道，而非HSL。这意味着，当将一个深色和一个浅色按50%比例混合时，结果未必是视觉上居中的灰度——尤其在两个颜色的饱和度或明度差异较大时，容易产生“脏”的颜色。理解color.mix的本质有助于避免这类问题。

• $weight参数的默认值是50，表示$color1和$color2各占50%。
• 权重仅影响混合比例，不改变色彩空间：计算始终在sRGB色彩空间下进行线性插值。
• 混合透明色（例如rgba(0,0,0,0.5)）时，alpha通道也会被加权计算，可能导致最终不透明度意外降低。

color.adjust 是什么？它根本不存在

在Sass标准函数库中，同样找不到color.adjust。这个写法很可能源于以下三种情况：旧版Compass的adjust-color()函数、某些PostCSS插件的伪语法，或开发者自己封装的函数。Dart Sass原生提供的是adjust-color()（注意没有color.前缀），但此函数已被标记为“弃用”（deprecated）。官方推荐使用更明确的change-color()，或独立的lighten()、desaturate()等函数。

继续使用adjust-color()不仅会收到编译警告，未来还可能彻底失效。且其参数逻辑容易令人误解。例如，adjust-color(#ff0000, $red: -20)实际上是将红色通道数值从255减到235，属于通道级数值调整，与“降低红色饱和度”这种基于人眼感知的操作完全不同。

• 推荐替代方案：lighten($color, 10%)比adjust-color($color, $lightness: 10)更直观，语义也更清晰。
• change-color()要求所有参数必须显式指定（例如change-color($c, $saturation: -20%)），避免隐式覆盖带来的意外。
• 任何基于adjust-color()的封装函数，若未处理好$alpha参数的边界（如传入0.8的alpha值，再增加$alpha: 0.3，导致alpha值大于1），就会产生非法的颜色值。

安全混色的三个实操原则

颜色运算不是简单的数学题，而是在设计约束下进行的可控转换。要避免输出像rgb(nan, 120, 200)或超长十六进制字符串这类不可控的CSS颜色值，主动防御是关键。遵循以下三个原则，可提升Sass颜色运算的安全性。

• 始终校验输入：使用@if not (type-of($c1) == 'color' and type-of($c2) == 'color')条件判断，防止变量未定义或类型错误导致编译静默失败。
• 统一色彩空间：在混合前，使用to-hsl()或to-rgb()函数对颜色进行显式转换，避免Sass自动推导带来的不一致性（例如#fff与white在某些函数中的解析精度可能不同）。
• 限制输出范围：对mix()的结果套上一层范围断言（例如自行实现assert-against($result, $min: #000, $max: #fff)函数），防止因浮点计算误差生成超出合法范围（0-255）的RGB分量。

为什么 HSL 调整比 RGB 混合更可控

当需要实现“让按钮悬停颜色稍微深一点”这类效果时，使用darken($primary, 10%)通常比mix($primary, #000, 20%)更可靠。原因在于，前者操作HSL色彩模型中的Lightness（明度）通道，能很大程度上保持色相与饱和度的稳定；而后者在RGB空间混合，可能同时拉低饱和度并偏移色相，对高饱和度原色尤为明显。

来看一个典型反例：mix(#ff0080, #000, 15%)得到#d9006b，颜色偏紫；而darken(#ff0080, 15%)得到#cc0066，更接近原色的“加深版”。这种差异在复杂的主题色系统中会被逐层放大。

• lighten()/darken()、saturate()/desaturate()系列函数都基于HSL模型，更符合设计师的直觉。
• 这些函数内部做了边界处理（例如Lightness不会低于0%或高于100%），而mix()函数不做任何裁剪。
• 若确实需要使用混合功能，可优先考虑scale-color()函数，它在HSL空间内缩放饱和度或亮度，比直接使用mix()更具可预测性。

在实际项目中，还有一个最易被忽略的细节：颜色函数链式调用时的精度衰减问题。连续调用五次lighten(..., 2%)，可能因浮点数计算的累积，导致最终颜色与预期lighten($c, 10%)结果出现肉眼可见偏差。此时，直接使用单次lighten($c, 10%)调用是更稳妥的选择。