hsl(from) 配 calc() 可批量生成状态色，但 from 仅解构变量不改变颜色，需 calc() 调整 h/s/l；语法错误会静默失效，l 值越界需用 max/min 兜底。
直接用 hsl(from) 搭配 calc() 就能批量生成状态色，不用手写 HEX、不依赖 JS，但必须严格按语法写，错一个空格就整个声明失效。
为什么 hsl(from var(--primary) h s l) 不起作用？
因为 from 只是“拆包”，不是“变色”。它把变量 --primary 解构为 h、s、l 三个通道值，原样输出——所以 hover 色和默认色完全一样。
- 真正改变颜色靠的是
calc()：比如calc(l - 10)变暗、calc(s * 0.7)降饱和 -
l是 0–100 的整数（不是百分比），所以calc(l + 20%)会静默失效 - 没写
calc()的声明，浏览器当普通 HSL 处理，不报错也不警告
hsl(from) 配 calc() 的典型 UI 场景
按钮悬停、禁用态、文字强调色这些高频状态，一行就能定义，且语义清晰：
- 按钮悬停（微暗）：
background: hsl(from var(--primary) h s calc(l - 10)); - 禁用文字（提亮+降饱和）：
color: hsl(from var(--primary) h calc(s * 0.3) calc(l + 15)); - 浅底深字（防发灰）：
color: hsl(from var(--primary) h calc(s * 0.8) calc(l + 20));
注意：亮度 l 容易越界，建议用 max(15%, calc(l - 30)) 或 min(90%, calc(l + 20)) 做兜底。
绕不开的语法雷区
新版相对颜色函数对格式极其敏感，浏览器不报错，但整条声明被静默丢弃：
-
from和颜色值之间**必须有空格**：hsl(from var(--primary) h s l)✅，hsl(fromvar(--primary) h s l)❌ - alpha 必须用
/引入：rgb(from #000 r g b / 0.6)✅，rgb(from #000 r g b, 0.6)❌ -
oklch()里L是 0–1 小数，C无上限，推荐用calc(C * 0.7)而非calc(C - 0.1)
最麻烦的从来不是写对一行 hsl(from var(--primary) h s calc(l - 10))，而是变量命名是否分层、亮度分布是否符合人眼感知、以及是否为 l 或 <code>s > 95% 这类边界做了 clamp —— OLED 屏或深色模式下，漏掉这些，UI 就容易翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
