必须写成calc(l - 20)，因l是0–100纯数字，calc(l - 20%)类型不匹配致整条声明静默失效；且需保留空格，结果自动截断至0–100。
不能直接用 calc(l - 20%)，必须写成 calc(l - 20) —— 因为 l 是 0–100 的纯数字，不是百分比单位。
为什么 calc(l - 20%) 会静默失效
浏览器从 hsl(from #3b82f6 h s l) 解构出的 l 是整数（比如 61），不是带单位的值。写成 calc(l - 20%) 相当于让 CSS 引擎计算 61 - 20%，类型不匹配，整条声明被丢弃，无报错、无 fallback。
-
hsl(from #3b82f6 h s calc(l - 20))✅ 正确：61 − 20 = 41，结果是hsl(216 64% 41) -
hsl(from #3b82f6 h s calc(l-20))❌ 失效：缺少空格，calc不识别表达式 -
hsl(from var(--c) h s calc(l - 20%))❌ 失效：同上，单位冲突
必须先定义为支持解构的颜色格式
十六进制如 #3b82f6 本身不可被 from 解构出 l；它必须先转为 hsl()、rgb() 或 oklch() 等函数形式。
- ✅ 推荐：
--brand: hsl(216 64% 61);（明确可解构） - ✅ 也可：
--brand: rgb(59 130 246);（但 RGB 没有l，得转hsl(from ...)才能调亮度） - ❌ 错误：
--brand: #3b82f6;（后续hsl(from var(--brand) h s calc(l - 20))在 Safari 16.4+ 以下完全不生效）
实际使用时注意明度截断和视觉一致性
calc(l - 20) 结果会自动 clamp 到 [0, 100] 区间，比如原 l: 15 减 20 得 0，不会负溢出。但要注意：
- HSL 的
l≠ 人眼感知亮度：在高饱和红/蓝区域，l - 20看起来比在灰阶区域“暗得多”，若需均匀变暗，应切到oklch()（calc(L * 0.8)），但 Safari 当前不支持oklch()函数，仅支持oklab() - 深色模式下，单纯减
l可能让文字对比度跌破 WCAG 4.5:1，建议配合@supports降级或手动验证 - 不要混用
filter: brightness()和相对颜色调l—— 前者是后处理，影响整个元素（含子内容），后者只改颜色值
真正容易被忽略的是：你写的 calc(l - 20) 看似简单，但它依赖上游变量是否已用现代颜色函数定义；一旦源头是 #xxx 或旧式 rgba()，整条链就断了，且没有任何提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
