如何使用Sass的color.mix和color.adjust函数安全进行颜色运算？
- 内容介绍
- 相关推荐
本文共计1197个文字，预计阅读时间需要5分钟。
plaintext在升级项目后，很多人遇到了 Undefined function color.mix() 错误。这是由于直接照搬旧文档中的写法导致的。旧文档中使用的 color.mix 是 Compass 时代的遗留命名习惯，而在现代 Sass（Dart Sass）中对应的函数是 mix。
真正可用的是 mix($color1, $color2, $weight)，它按权重混合两个颜色的 RGB 通道，而非 HSL；这意味着对深色+浅色做 50% 混合，结果未必是视觉居中的灰度——尤其当两色饱和度或明度差异大时，容易产生脏色。
-
$weight默认为 50，表示 $color1 占比 50%，$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() 等。
本文共计1197个文字，预计阅读时间需要5分钟。
plaintext在升级项目后，很多人遇到了 Undefined function color.mix() 错误。这是由于直接照搬旧文档中的写法导致的。旧文档中使用的 color.mix 是 Compass 时代的遗留命名习惯，而在现代 Sass（Dart Sass）中对应的函数是 mix。
真正可用的是 mix($color1, $color2, $weight)，它按权重混合两个颜色的 RGB 通道，而非 HSL；这意味着对深色+浅色做 50% 混合，结果未必是视觉居中的灰度——尤其当两色饱和度或明度差异大时，容易产生脏色。
-
$weight默认为 50，表示 $color1 占比 50%，$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() 等。