lighten() 和 darken() 操作 HSL 的 L 通道，有明度边界限制；mix() 基于 RGB 插值更可控；contrast() 适配深色模式；所有函数均在编译期执行，需确保变量有效。
lighten() 和 darken() 是 Less 编译期直接可用的颜色亮度调整函数，但它们不是“加白/加黑”，而是操作 HSL 的 L 通道——这意味着效果受原始颜色明度值严格限制，稍不注意就触顶或归零。
lighten() 和 darken() 的 HSL 边界行为必须提前确认
这两个函数不会报错，但会静默返回边界值：lighten(#fff, 5%) 还是 #ffffff，darken(#000, 10%) 仍是 #000。这不是 bug，是 HSL 明度 L ∈ [0%, 100%] 的数学必然。
- 用浏览器 DevTools 查看编译后颜色的 HSL 值，确认 L 是否真的变化了
- 对浅灰背景（如
#f8f9fa）慎用lighten()：哪怕只加 3%，也可能产出肉眼难辨的#fbfbfb - 深色主题下，
darken(@accent, 20%)很可能让文字与背景对比度过高，刺眼而非协调
mix() 比 lighten()/darken() 更适合“视觉可控”的亮度微调
如果你想要的是“像加了一层白/黑遮罩”的直观效果，mix() 更可靠——它做的是 RGB 线性插值，不经过 HSL 转换，高饱和色不易发灰。
-
mix(@color, white, 20%)≈ 视觉上“提亮 20% 白”，比lighten(@color, 20%)更稳定 - 权重参数必须带
%单位：mix(@a, @b, 30)会编译失败，正确写法是mix(@a, @b, 30%) - 对浅色文字（如
#333）在浅背景上可读性不足时，mix(#333, #fff, 40%)比lighten(#333, 15%)更易达标 WCAG AA
避免链式调用和跨度过大的数值
Less 不会把 lighten(darken(@c, 10%), 10%) 当作“净变化 0%”处理，而是两次独立的 L 值运算，中间转换有精度损失，尤其在 Less 3.4 及更早版本中明显。
- 单次调整建议控制在 ±8%～±15% 区间；超过 ±25% 容易失真（比如
darken(#00e0ff, 35%)直接变深青灰） - 不要依赖嵌套推导：
@hover: lighten(@bg, 8%); @active: darken(@hover, 12%)—— 改成直接基于原色：@active: darken(@bg, 4%) - 渐变中用
linear-gradient(to right, @primary, lighten(@primary, 12%))是安全的，但别写lighten(lighten(@primary, 6%), 6%)
深色模式下别硬套 light/dark 推导逻辑
从 #ffffff 深色化得到的 #b3b3b3 在 #121212 背景上几乎不可读——人眼在暗环境下需要更高对比度，但又不能过曝。这时候 contrast() 才是起点。
-
contrast()四参数形式（contrast(@bg, @dark, @light, @threshold)）仅 Less 3.5+ 支持；旧版会报Operation on an invalid type - 推荐组合：
lighten(contrast(@bg, black, white, 0.43), 3%)，先保底线，再微调柔和度 - 如果项目还在用 Webpack less-loader 封装的 Less 3.0.x，
contrast()只接受三参数，阈值固定为 0.43，无法自定义
真正容易被忽略的点是：这些函数全部运行在编译期，没有运行时反馈。你写的 lighten(@undefined-var, 10%) 不会警告，而是直接让整个样式块失效或产出透明色。务必确保所有输入变量已正确定义、类型为 color、且不在注释或条件 mixin 中隐式失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
