color-mix()不支持css变量，仅接受字面量颜色；需手动将变量值转为十六进制或oklch等字面量后硬编码使用，并用@supports包裹加fallback，且不响应变量动态变化。
color-mix()根本不接受CSS变量作颜色参数
直接写 color-mix(in srgb, var(--primary), var(--secondary)) 会静默失败，浏览器解析时直接跳过整条声明，控制台不报错、也不渲染——你看到的只是前一个有效颜色值（或继承色、透明）。这不是 bug，是规范明确限制：color-mix() 只认字面量颜色，比如 #2563eb、hsl(210 70% 60%)、rebeccapurple。
想用变量，必须提前“展开”成字面量
实际能走通的路径只有一条：把变量值手动转成颜色字面量，再塞进 color-mix()。这需要人工或构建时介入，不是运行时自动替换：
- 用 Chrome DevTools 的拾色器点出
--primary对应的实际值（如oklch(55.2% 0.215 252.3)），复制粘贴进 CSS - 在构建流程中（如 PostCSS 插件或 Vite 插件）扫描
var(--xxx)，查表替换为对应十六进制或 OKLCH 字符串 - 别指望
calc()或attr()能绕过——它们不参与颜色解析，color-mix()在 CSS 计算早期就要求确定值
@supports + fallback 是强制动作，不是可选优化
Firefox 默认禁用该函数，Safari 对 in oklch 支持不全，Chrome/Edge 111+ 是唯一较稳环境。没 fallback 就等于没写：
- 必须用
@supports (color: color-mix(in srgb, red, blue))包裹所有依赖逻辑 - 每个使用处都得写两遍：
background-color: #2563eb;再覆盖background-color: color-mix(in srgb, #2563eb 80%, #1e40af 20%); - fallback 值不能是空或
transparent，得是人工调出的近似色（比如用 DevTools 点取color-mix()输出结果后复制）
真正容易被忽略的点：它和变量系统是割裂的
color-mix() 不感知变量更新、不响应 :root 动态修改、不随 prefers-color-scheme 自动重算——你改了 --primary，它不会重新混合。所谓“配合”，只是人把变量值抄出来再硬编码进去。如果主题色频繁变更，这套方案维护成本远高于直接写死多套色值或改用 hsl() 调整。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
