darken() 和 lighten() 是 less 编译期函数，基于 hsl 明度通道线性调整，非 rgb 加黑/白；参数必须带 % 单位，输入须为合法不透明颜色，极值色（如 #000/#fff）无法再调，大步进易失真，需配合 contrast() 等确保可访问性。
darken() 和 lighten() 是 Less 编译期执行的颜色函数，直接操作 HSL 的 lightness 通道，不是“加黑”或“加白”，也不改变色相与饱和度——结果是否符合预期，取决于原始颜色的 L 值（0%–100%）。
darken() 和 lighten() 的参数必须带 % 单位
Less 会严格校验单位：写成 darken(@color, 15) 或 lighten(@color, 0.15) 都会报错 error evaluating function `lighten`: argument must be a number with unit %。
- ✅ 正确写法：
darken(#e74c3c, 10%)、lighten(@primary, 8%) - ❌ 错误写法：
darken(#e74c3c, 10)、lighten(@primary, 0.08)、lighten(@primary, "10%")（字符串不被识别） - 输入颜色不能是 CSS 变量（如
var(--bg)），也不能是未定义变量或透明色（如rgba(0,0,0,0.5)），否则编译失败或结果偏离直觉
深色/浅色边界失效问题很常见
当原始色已到 HSL 明度极限时，函数不再生效：darken(#000, 20%) 仍返回 #000，lighten(#fff, 5%) 仍为 #ffffff。这不是 bug，而是 HSL 空间固有约束。
- 对深灰（如
#1a1a1a）连续lighten(, 10%)两次，可能第一次就接近中性灰，第二次几乎无变化 - 对高亮浅色（如
#f9f9f9）用darken(, 12%)后，L 值下降有限，视觉差异微弱 - 别依赖多次嵌套调用（如
darken(darken(@c, 10%), 10%)）来“加码”，应直接计算总偏移：darken(@c, 20%)
对比度和可读性容易被忽略
单纯调用 lighten() 不保证满足 WCAG AA 标准（文本与背景对比度 ≥ 4.5:1）。例如 lighten(#333, 15%) 得到 #5c5c5c，在白色背景上对比度仅约 3.2:1。
- 文字颜色慎用
lighten()直接生成：浅灰文字在浅背景上极易不可读 - 推荐组合使用：
contrast()判断基础反色，再用lighten()或darken()微调，比如lighten(contrast(@bg, #000, #fff), 3%) - 对高饱和主色（如
#ff4444）慎用大步进darken(, 25%)——易落入浑浊棕红，而非“深红”
真正可控的色阶构建，靠的是固定步长（5%–12%）、语义化命名、以及避免单点硬编码；而所有函数都只在编译期起作用，输出纯 CSS 颜色值，不引入运行时依赖——这点常被忽略，却决定了它能否用于 SSR 或静态站点生成场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
