color-mix() 不支持 css 变量作颜色参数，因解析阶段拒绝未展开的 var()，仅接受字面量颜色；须用构建替换、js 注入或 @property（仅比例）实现变量结合，并需层叠降级兼容旧浏览器。
color-mix() 不能直接用 CSS 变量作颜色参数，写了就静默失效——不是报错，而是整条声明被浏览器丢弃，DevTools 里显示 “Invalid property value”，控制台却什么也不说。
为什么 color-mix(in srgb, var(--primary), #fff) 会不生效
浏览器在 CSS 解析阶段就拒绝未展开的 var()：它只接受字面量颜色，比如 #2563eb、hsl(210 70% 60%) 或 rebeccapurple。currentColor 同样不被允许，因为它是运行时动态值。常见误判场景包括：
- 复制了 PostCSS 插件生成的代码（变量已被替换），但本地纯 CSS 环境下直接粘贴，立刻失效
- 把
color-mix()塞进background复合属性，例如background: color-mix(in srgb, red, blue) no-repeat;→ 整个background声明被忽略 - 漏写
in关键字、大小写错误（SRGB必须小写srgb）、权重总和 ≠100%、缺%符号（如red 60）——这些都会导致静默失败
真正能落地的“变量结合”只有三种路径
不是语法技巧，而是工程取舍：
-
构建时替换：用 PostCSS、Vite 插件或 SCSS，在打包前把
var(--primary)替换成实际值，输出类似color-mix(in srgb, #2563eb 70%, #1e40af 30%) -
JS 注入：读取
getComputedStyle(document.documentElement).getPropertyValue('--primary')，再调用 chroma.js 或手写插值逻辑，最后写回style或cssText -
@property+ 比例变量（仅 Chrome）：先注册@property --mix-ratio { syntax: '<percentage>'; inherits: false; initial-value: 50%; }</percentage>，再配合color-mix(in oklch, hsl(210 70% 60%), black var(--mix-ratio))—— 注意：这仍不支持变量作为颜色本身，只支持比例变量
如何验证 color-mix() 是否真的生效
最简单的方式是打开 DevTools，点开该元素的 Computed 面板，看 color 或 background-color 的最终计算值是否是一个具体颜色（如 rgb(127 0 127)）。如果显示为空、继承值或初始值，基本可断定函数未执行。
别依赖人眼判断混合效果是否“差不多”——不同色彩空间（srgb vs oklch）结果差异极大，color-mix(in srgb, #ff0000 50%, #0000ff 50%) 得到的是暗紫 #7f007f，不是视觉居中的品红。
兜底和兼容性必须显式处理
color-mix() 目前仅 Chrome 111+ 和 Safari 16.4+ 支持（后者需开启实验功能），Firefox 完全不支持。没支持的浏览器会忽略整条声明，导致颜色消失。必须靠层叠顺序做降级：
button {
--btn-bg: #007bff;
background-color: var(--btn-bg);
}
button:hover {
background-color: rgba(255, 255, 255, 0.15);
background-color: color-mix(in srgb, var(--btn-bg), rgb(255 255 255 / 0.15));
}
后写的 background-color 会覆盖前写的；旧浏览器跳过第二行，执行第一行；新浏览器执行第二行，第一行被自然忽略。这不是渐进增强，是生存必需。
真正难的不是写对语法，而是意识到：这个函数在生产环境里，目前还不是一个“开了就能用”的特性——它需要构建链路、运行时注入或明确的浏览器边界意识。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
