color-mix() 和 hsl(from ...) 是减少颜色冗余最有效的手段；前者需固定颜色值且显式声明色彩空间，后者可动态提取并运算 HSL 分量，但须防变量未定义、作用域失效及拼写错误。
直接用 color-mix() 和 hsl(from ...) 替代手写一堆十六进制色值，是减少颜色冗余最有效的手段——前提是别把变量塞进函数参数里，也别指望浏览器帮你实时转 HEX。
color-mix() 不能混变量，但能混固定值
color-mix() 要求所有输入颜色必须是已知的、可计算的值，不接受 var(--primary) 或 currentColor。常见错误写法：color-mix(in srgb, var(--primary) 70%, #000 30%)，会直接报 Invalid property value。
- 正确做法：先把变量“展开”成具体值，比如在构建时或手动定义好
--primary-mix-dark: color-mix(in srgb, #2563eb 70%, #1e40af 30%) - 适合场景：按钮悬停态、禁用态背景、表单错误提示底色等需稳定插值的位置
- 注意色彩空间必须显式声明，
in srgb最兼容；in oklch更准但仅 Chrome 111+ 支持
hsl(from ...) 是动态派生的真正解法
相比老式 hsl(var(--h), var(--s), calc(...))，hsl(from var(--color-primary) ...) 能从任意颜色中提取 HSL 分量并做相对运算，语义清晰、不依赖人工拆解。
- 主色变暗 20%：
--primary-darker: hsl(from var(--color-primary) h s calc(l - 20)) - 生成互补色（色相 +180）：
--color-secondary: hsl(from var(--color-primary) calc(h + 180) s l) - 避免明度溢出：
l计算结果必须在 0–100 之间，超出会静默截断为 0 或 100
变量嵌套引用要防“空值断裂”
你写 --color-primary-light: hsl(from var(--color-primary) h s 85%)，但万一 --color-primary 没定义，整个声明就失效，后续所有依赖它的变量都变成未定义状态。
立即学习“前端免费学习笔记（深入）”；
- 关键防线：每个
var()都加 fallback，例如hsl(from var(--color-primary, #3b82f6) h s 85%) - 不要在
:root外定义基础色变量，否则局部作用域下查不到，hsl(from ...)会回退到 fallback - 调试技巧：在 DevTools 的 Styles 面板里 hover
var(--xxx)，看是否显示实际解析值；若显示var(--xxx)原样，说明变量未生效
真正难的不是写出一个 hsl(from ...)，而是确保整条变量链——从 :root 定义、媒体查询覆盖、JS 动态注入，到最终被 hsl(from ...) 或 color-mix() 消费——全部落在同一作用域且无拼写/大小写错误。漏掉一个 - 或大小写错位，颜色就全乱了。
