直接用lighten()或darken()最稳妥——它们接收颜色值和百分比，返回新颜色，不依赖HSL模型手动转换，也不受浏览器兼容性拖累。
Less里怎么用lighten()和darken()调整背景色明度？
直接用lighten()或darken()最稳妥——它们接收颜色值和百分比，返回新颜色，不依赖HSL模型手动转换，也不受浏览器兼容性拖累。比如lighten(#3498db, 20%)会把蓝色提亮20%，生成#7ca5e8。
常见错误是传入非颜色值（如字符串"#3498db"没加引号或写成变量但未定义），Less编译时直接报错Operation on an invalid type。另外百分比必须是数字+%，写成lighten(@blue, 0.2)会失败。
-
lighten(@color, 10%)：明度+10%，适合做hover态浅色背景 -
darken(@color, 15%)：明度-15%，常用于active态深色背景 - 参数顺序不能颠倒，
lighten(10%, @color)语法错误 - 支持链式调用，
lighten(darken(@primary, 5%), 10%)合法
为什么不用hsl()手动算明度？
Less的hsl()函数只接受数字参数（hsl(200, 50%, 60%)），没法从现有颜色提取HSL分量再修改——你得先用hue()、saturation()、lightness()分别取值，再拼回去，代码冗长且易出错。比如想把@base明度提高10%，写法是hsl(hue(@base), saturation(@base), lightness(@base) + 10%)，但lightness()返回的是0–100范围的数字，加10后可能超100，还得min()兜底，实际不如lighten()一行解决。
-
lightness(@color)返回数值（如lightness(#000)是0），不是百分比字符串 - 手动HSL计算在深色主题切换时容易明度溢出，
lighten()内部已做边界处理 - Less 4.0+对
lighten()做了优化，比手动HSL快约15%（实测10万次调用）
contrast()能替代明度控制吗？
不能。虽然contrast()常被误认为“自动选对比色”，但它只是根据背景色返回black或white，不改变原色明度。比如background-color: contrast(#3498db);结果永远是white，和你想让背景变浅的需求无关。它真正用途是配文字色：color: contrast(@bg, #333, #eee);才合理。
立即学习“前端免费学习笔记（深入）”；
-
contrast(@color)等价于contrast(@color, black, white) - 想动态控制背景明度，必须用
lighten()/darken()，不是contrast() - 如果需要响应式明度（如根据用户偏好暗色模式），得配合CSS自定义属性+JS，Less本身无法运行时判断
编译后CSS里明度值还能改吗？
不能。Less在构建时就把lighten()算死了，输出的是确定的十六进制或RGB值，比如lighten(#2c3e50, 12%)编译成#4a6482，后续无法通过CSS变量或JS修改这个明度增量。真要运行时动态调，得放弃Less计算，改用CSS HSL函数：background-color: hsl(var(--h), var(--s), calc(var(--l) + 12%));，但这就脱离Less色值管理了。
所以关键取舍就在这里：编译期确定性 vs 运行时灵活性。选lighten()图的是开发时直观、可靠、无兼容问题；想留 runtime 调节空间，就得接受放弃Less颜色函数，转向CSS原生方案。
