color-mix() 不支持 CSS 变量作颜色参数，因解析阶段拒绝未展开的 var()；仅接受字面量颜色，否则整条声明静默失效，需构建时替换、JS 注入或 @property（限比例）实现变量结合。
color-mix() 不能直接用 CSS 变量作颜色参数，所谓“结合变量”必须靠降级、预计算或运行时注入——没有纯 CSS 的实时响应方案。
为什么 color-mix(in srgb, var(--primary), #fff) 会静默失败
浏览器在 CSS 解析阶段就拒绝展开 var()：它只接受已知的、可立即解析的颜色字面量，比如 #2563eb、hsl(210 70% 60%) 或 rebeccapurple。写 var(--primary) 进去，结果不是“混合失败”，而是整条声明被丢弃——DevTools 里显示 “Invalid property value”，控制台却无任何提示。
常见误判场景：
- 复制了构建工具生成的代码（如 PostCSS 插件提前替换了变量），但在本地纯 CSS 环境下直接粘贴，立刻失效
- 用了
currentColor，以为能继承文字色——但currentColor是运行时动态值，同样不被允许 - 把
color-mix()塞进background复合属性，例如background: color-mix(in srgb, red, blue) no-repeat;→ 整个background声明被忽略
真正可用的“变量结合”路径只有三种
不是语法技巧，而是工程取舍：
立即学习“前端免费学习笔记（深入）”；
-
构建时替换：用 PostCSS、SCSS 或 Vite 插件，在打包前把
var(--primary)替换成实际值，输出color-mix(in srgb, #2563eb 70%, #1e40af 30%) -
JS 注入：读取
getComputedStyle(document.documentElement).getPropertyValue('--primary')，调用color-mix()等价逻辑（如chroma.js或自写插值），再写回style或cssText -
@property + color-scheme 有限模拟：仅 Chrome 支持，需先注册
@property --mix-ratio { syntax: '<percentage>'; inherits: false; initial-value: 50%; }，再配合color-mix(in oklch, hsl(210 70% 60%), black var(--mix-ratio))—— 但注意：这仍不支持变量作为颜色本身，只支持比例变量
权重和色彩空间写错，比语法错更难排查
漏掉 in 关键字、大小写错误、权重总和 ≠100%、空格缺失，都会导致静默失效。例如：
-
color-mix(srgb, red 50%, blue 50%)→ 缺in，无效 -
color-mix(in SRGB, red 50%, blue 50%)→SRGB必须小写srgb -
color-mix(in srgb, red 60%, blue 30%)→ 总和 90%，剩余 10% 无归属，解析失败 -
color-mix(in srgb, red 60, blue 40)→ 缺%符号，被忽略（60不是合法<percentage>）
验证是否生效最简单的方式：打开 DevTools，点开该元素的 Computed 面板，看 color 或 background-color 是否显示为一个具体的十六进制或 rgb() 值。如果还显示 color-mix(...) 字符串，说明根本没解析。
别指望它做悬停动画或媒体查询响应
color-mix() 在 CSS 计算阶段就固化成一个静态颜色值，比如 color-mix(in srgb, #007bff 80%, #fff 20%) 解析后就是 #3399ff。给它加 transition: background-color，只会从旧色跳到新色，中间没有插值过程。
真要平滑过渡，得两步走：
- 先用
color-mix()算出起止色（比如正常态和悬停态各自对应的颜色） - 再把这两个结果手动转成
oklch()或hsl()格式，写进transition→ 例如color: oklch(60% 0.2 240);→color: oklch(70% 0.2 240);
最容易被忽略的一点：你写的每一个 color-mix()，都只是在“生成一个固定颜色”，它和手写 #3399ff 没区别。所谓“现代调色”，不在于函数多酷，而在于你是否清楚——它在哪一步失去控制权，以及你愿不愿意为那 5% 的不支持率补上 JS 逻辑。
