color-mix() 不支持 CSS 变量，因其为静态解析函数，参数需在样式解析阶段即为字面量颜色，而变量值在计算阶段才注入；必须手动预转变量为色彩空间字面量并配 @supports 和 fallback。
不能直接结合——color-mix() 不接受 var(--primary) 或 currentColor，所有输入必须是字面量颜色（如 #2563eb、oklch(55.2% 0.215 252.3)），否则浏览器报 Invalid property value 并静默丢弃整条声明。
为什么 color-mix() 无法读取 CSS 变量
它不是运行时表达式求值器，而是静态颜色合成函数：浏览器在解析样式时就要求每个参数可立即确定。变量值在计算阶段才注入，color-mix() 的参数层早于该阶段，因此不兼容。
- 写
color-mix(in srgb, var(--primary), white)→ 直接失效，DevTools 显示“invalid value” - 哪怕
--primary是#2563eb，也不能绕过语法校验 -
from语法（如oklch(from var(--primary) l c h)）属于相对颜色函数，和color-mix()是两套机制，不能混用
想“看起来像用变量生成色阶”，得手动预转 + 层叠 fallback
本质是人替浏览器完成变量展开：把主题色提前转成目标色彩空间下的字面量，再写死权重。例如主色 #3a5fa8 对应 oklch(55.2% 0.215 252.3)，则：
- 浅色变体：
color-mix(in oklch, oklch(55.2% 0.215 252.3) 60%, oklch(100% 0 0) 40%) - 深色变体：
color-mix(in oklch, oklch(55.2% 0.215 252.3) 70%, oklch(0% 0 0) 30%) - 必须配
@supports包裹，并在外部定义--primary-light: #e0e7ff这类 fallback 值 - 别塞进
background复合属性里——background: color-mix() no-repeat会整体失效
真正可用的“变量友好”替代方案
如果主题色需频繁变更且要自动产出色阶，color-mix() 不是解法。可行路径只有两条：
立即学习“前端免费学习笔记（深入）”；
- 构建时处理：用 PostCSS 插件（如
postcss-theme-colors）在打包阶段把var(--primary)替换为预计算的字面量color-mix()调用 - 运行时接管：用 JS 读取
getComputedStyle(document.documentElement).getPropertyValue('--primary')，转 OKLCH 后拼字符串注入style标签（注意重排风险） - 退而求其次：改用
hsl()派生，比如hsl(from var(--primary) h s calc(l * 0.9))—— 它支持from var()，但明度调整不如oklch感知均匀
最容易被忽略的是：你写的每一行 color-mix() 都是“一次性快照”，它不感知 data-theme 切换、不响应 prefers-color-scheme、也不随变量更新重算——所谓“结合变量”，只能靠人手或工具在变量落地前就把它消灭掉。
