<p>必须将明度l存为无单位整数（如60），再用calc(var(--l) - 10)运算；若存为60%或写calc(var(--l) - 10%)，因hsl()要求l为0–100纯数字，浏览器会静默丢弃整条声明。</p>
calc() 不能直接对带 % 的明度值做运算，必须把 l 存为无单位整数（如 60），再用 calc(var(--l) - 10) 计算——否则浏览器静默丢弃整条声明。
为什么 calc(var(--l) - 10%) 会失效
因为 hsl() 要求明度参数是 0–100 的纯数字，不接受带单位的值。如果 --l 定义为 60%，calc(60% - 10%) 在 CSS 中非法；如果定义为 60，calc(60 - 10) 才合法且可被 hsl() 正确接收。
-
--l: 60%+calc(var(--l) - 10%)→ 解析失败，规则被忽略 -
--l: 60+calc(var(--l) - 10)→ 得到50，hsl(210, 80%, 50)合法（注意：这里50是数字，hsl()自动当50%处理） - Safari ≤15.4 不支持
hsl(from var(--c) h s calc(l - 10))，必须提前算好并声明为独立变量，如--l-dark: 50
如何安全地生成变暗/变亮的明度值
明度越界（l 或 <code>l > 100）会导致颜色渲染异常或完全不可见，必须主动截断。
- 用
max(0, min(100, calc(var(--l) - 15)))是目前最兼容的写法，比clamp()更稳妥（IE / Safari ≤15.4 不支持clamp()） - 深色背景上主色建议下限卡死
15（即max(15, calc(var(--l) - 25))），避免失色 - 浅色背景上文字提亮上限封顶
92（即min(92, calc(var(--l) + 25))），防止泛白刺眼 - 别用
rgba()或opacity替代明度调整——它们改变的是透明度或整体亮度感知，不是 HSL 模型中的l值
实际声明时的典型结构
把基础色拆成三个变量，再派生明度，是唯一能跨浏览器稳定工作的模式：
立即学习“前端免费学习笔记（深入）”；
body {
--h: 210;
--s: 80;
--l: 60;
--l-dark: max(15, calc(var(--l) - 25));
--l-light: min(92, calc(var(--l) + 20));
--color: hsl(var(--h), calc(var(--s) * 1%), var(--l));
--color-dark: hsl(var(--h), calc(var(--s) * 1%), var(--l-dark));
--color-light: hsl(var(--h), calc(var(--s) * 1%), var(--l-light));
}-
calc(var(--s) * 1%)是给无单位饱和度补%的可靠方式，比拼字符串更健壮 - 所有
hsl()调用中，l参数都来自已计算好的变量（如var(--l-dark)），不嵌套calc()，避开 Safari ≤15.4 的解析缺陷 - 如果要用相对颜色语法（
hsl(from ...)），确保浏览器版本 ≥ Safari 16.4 / Chrome 111，且from和变量之间有空格：hsl(from var(--c) h s calc(l - 10))
真正容易翻车的地方不在公式怎么写，而在于是否意识到：HSL 的 l 是一个 0–100 的纯数字，不是百分比；它没有运行时类型转换，也不报错——错就静默失效。
