必须将明度（l）定义为无单位整数（如--l: 60），calc()中所有运算数须同类型，结果再手动补%单位；若--l带%，如60%，则calc(60% - 10)因单位不匹配而失效，旧版safari更会静默丢弃整条声明。
必须把明度（L）存为无单位整数，再用 calc() 运算，最后手动补 % 单位；否则浏览器直接丢弃整条声明。
为什么 hsl(var(--h), var(--s), calc(var(--l) - 10%)) 会失效
因为 --l 如果定义为 60%，它就是一个带百分号的字符串，calc(60% - 10%) 合法，但 calc(60% - 10) 非法——单位不匹配。更常见的是：--l: 60% 被解析后参与 calc() 时，部分浏览器（尤其是 Safari ≤15.4）会静默失败，整条 background-color 声明被忽略，回退到透明或继承色。
-
--l必须定义为无单位数字，例如--l: 60，不是--l: 60% -
calc()中所有操作数必须同类型：加减的值也得是无单位整数，如calc(var(--l) - 15)，不能写calc(var(--l) - 15%) - 最终传给
hsl()的 L 参数仍需带%，所以得靠变量拼接：hsl(var(--h), var(--s), calc(var(--l) - 15)% )
如何安全地实现 darken 效果（比如悬停变暗 12%）
关键不是“减多少”，而是防止越界——明度低于 0 或高于 100 会导致渲染异常或静默失效。CSS 没有 if，只能靠 max() 和 min() 截断：
- 基础定义：
--base-l: 60（无单位） - 变暗变量：
--dark-l: max(0, min(100, calc(var(--base-l) - 12))) - 使用方式：
background-color: hsl(var(--h), var(--s), var(--dark-l)%); - 注意：
var(--dark-l)%是合法的，%是独立单位符号，不是字符串拼接
容易被忽略的兼容性陷阱
旧版 Safari（≤15.4）对 hsl() 内嵌 calc() 支持极弱，哪怕语法完全正确，也可能整条声明失效且不报错。这不是动画卡顿，是颜色直接消失。
- 最稳方案：提前算好并声明为独立变量，例如
--l-hover: 48，然后用hsl(var(--h), var(--s), var(--l-hover)%); - 若必须动态（如深色模式下响应系统偏好），请用 JS 更新变量：
el.style.setProperty('--l', (baseL - 12).toString()); - 永远在 DevTools 里检查 computed 样式中
background-color是否真实生效，别只看 styles 面板里的规则是否“划掉”
真正麻烦的从来不是怎么写那行 calc()，而是明度变化后，文字对比度是否跌破 WCAG AA 标准、按钮在深色背景上是否发灰、以及动画插值是否因 L 值跳变而闪烁——这些都得实测，不能靠推演。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
