hsl(calc(...))失效，因css规范禁止在hsl()内嵌套calc()，浏览器会静默丢弃整条声明；必须拆解h/s/l为独立变量，再用var()传入hsl()。
直接用 hsl() 套 calc() 是行不通的，必须把 H/S/L 拆成独立变量再组合——否则浏览器会静默丢弃整条声明。
为什么 hsl(calc(...)) 会失效
浏览器解析 hsl() 时，要求每个参数必须是“可立即求值的合法值”，而 calc() 不能嵌套在函数参数内部（CSS 规范明确禁止）。写成 hsl(calc(210 + 15), 70%, 60%) 看似合理，实际会被整个忽略，退回到继承色或透明。
- 错误现象：颜色突然消失、按钮变黑/变白、开发者工具里该声明被划掉但无报错
- 真正可行路径：先用
calc()算出数值，存为变量；再把变量名传给hsl() - 变量值必须格式正确：
--h: 210✅（无单位整数），--s: 70%✅（带 %），--l: 55✅（无单位），三者不能混用单位制
如何安全生成悬停/禁用/深色模式衍生色
核心是只动 l（亮度）和 s（饱和度），色相 h 保持稳定——这是 UI 一致性的底线。
- 悬停变暗：
background: hsl(var(--brand-h), var(--brand-s), calc(var(--brand-l) - 8));（注意--brand-l存的是 55，不是 55%） - 禁用态降饱和+提亮：
color: hsl(var(--brand-h), calc(var(--brand-s) * 0.4), calc(var(--brand-l) + 12)); - 深色模式切换只需改
--brand-l（如从55→32），--brand-h和--brand-s完全不动 - 防越界必须手动处理：
calc(var(--brand-l) - 8)可能得负数，要用max(0, min(100, ...))包裹
常见单位与运算陷阱
HSL 各通道对单位极其敏感，错一个字符就失效，且不报错。
-
--s必须定义为70%，不能是"70%"或70（后者会导致hsl(h, 70, l)被 Safari 解析失败） -
calc()里不能混单位：calc(55% - 8)❌，calc(55 - 8)✅（前提是--brand-l存的是纯数字） - 百分号必须紧贴数字：
55%✅，55 %❌（空格导致解析失败） - 饱和度补 % 单位要靠乘法：
calc(var(--brand-s) * 1%)比拼字符串更可靠
色相偏移别硬算，优先用 lch()
如果真需要动态旋转色相（比如主题色循环切换），hsl() + calc() 不是解——它不自动模 360，hsl(375, 70%, 60%) 在旧 Safari 上可能崩。
- 稳妥做法：
lch(60% 30 calc(220deg + 15deg))，浏览器自动绕回 0–360 - 兼容性底线：Chrome 111+、Safari 16.4+、Firefox 112+ 支持；若需支持更老版本，只能预设几组固定
--hue-shifted值，用 JS 切换 - 别在
oklch()里调 H 通道——数值跳变大，容易跨视觉断层，补色建议用预设
最易被忽略的一点：所有衍生色的明度分布必须符合人眼感知，不是线性加减。比如 l: 20 到 l: 30 的视觉差，远小于 l: 80 到 l: 90。真要精细控制，得用 lch() 或构建期工具预计算，纯 CSS calc() 只能做粗粒度调整。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
