darken 和 lighten 基于 hsl 亮度通道线性调整，受原始色 l 值限制，易触边界（如 #000 无法再暗）；推荐用 tone-steps 配合循环生成语义化色阶，深色模式应弃单色推导改双色系，mix() 比 darken/lighten 更可控。
darken 和 lighten 函数的实际行为与参数陷阱
Less 的 darken() 和 lighten() 不是简单地增减 RGB 值，而是基于 HSL 色彩空间对亮度（L）通道做线性调整。这意味着对深色（如 #1a1a1a）反复用 lighten(..., 10%) 可能很快“过曝”成灰白，而对浅色（如 #f8f9fa）用 darken(..., 10%) 也可能迅速失去细节——不是数值越小越安全，而是和原始色的 L 值强相关。
常见错误现象：darken(#000, 20%) 返回 #000（L 已为 0，无法再暗），lighten(#fff, 10%) 同样返回 #fff。这不是 bug，是 HSL 边界限制。
- 参数第二位是百分比（
0%–100%），不是像素或整数；写成darken(@base, 10)会编译失败 - 输入颜色必须是有效颜色值（
#hex、rgb()、命名色等），不能是变量未定义或字符串 - 慎用于 alpha 通道色（如
rgba(0,0,0,0.5)）：Less 会先转为不透明等效色再计算，结果可能偏离直觉
构建可维护的色阶变量组：别硬编码 5 层 lightness 偏移
直接写 @color-1: lighten(@primary, 15%); @color-2: lighten(@primary, 10%); ... 很难维护。更合理的方式是用循环生成，或定义一组语义化偏移量。
推荐做法：用 map 或 list 封装常用亮度步长，配合函数批量产出
@primary: #4a6fa5;
@tone-steps: 25%, 15%, 8%, 0%, -8%, -15%, -25%; // 正数 lightens，负数 darkens
<p>.tone-loop(@i: length(@tone-steps)) when (@i > 0) {
@step: extract(@tone-steps, @i);
@name: ~"tone-@{i}";
.@{name} { color: if(@step > 0%, lighten(@primary, @step), darken(@primary, abs(@step))); }
.tone-loop(@i - 1);
}
.tone-loop();
</p>
这样生成的类名（.tone-1 到 .tone-7）对应明暗梯度，且修改 @tone-steps 即可全局重算——比手调每个变量可靠得多。
darken/lighten 在主题切换中的局限性
如果项目需要深色模式（dark mode），仅靠 darken(@light-bg, 20%) 推导深色背景往往不够。因为人眼在低照度下对对比度更敏感，单纯变暗会导致文字可读性骤降（例如 darken(#ffffff, 30%) 得到 #b3b3b3，在深灰背景上灰字几乎不可读）。
此时应放弃“单色推导”，改用双色系设计：
- 定义独立的
@bg-light/@bg-dark、@text-light/@text-dark变量 - 用
contrast()函数辅助判断是否需切换文本色：contrast(@bg, @text-light, @text-dark) - 避免对
@text频繁套darken()：深色模式下，文字通常需更亮（而非更暗），逻辑方向相反
替代方案：mix() 比 darken/lighten 更可控
当需要精确控制明暗过渡节奏（比如按钮悬停从 #4a6fa5 渐变到 #3a5a85），mix() 比 darken() 更直观：它按比例混合两种颜色，不受 HSL 边界钳制。
示例对比：
// 用 darken：结果依赖原色 L 值，不可预测
.dark-hover { background: darken(#4a6fa5, 12%); } /* → #3a5a85 */
<p>// 用 mix：明确指定混入 12% 的黑色，线性可预期
.dark-hover { background: mix(#000, #4a6fa5, 12%); } /<em> → #3e5d7f </em>/
</p>
mix() 的第三个参数是“混入第二色的比例”，0% = 完全第一色，100% = 完全第二色。对 UI 组件微调（如 hover/focus 状态）更稳妥，尤其当你已有一套标准色卡时。
真正麻烦的从来不是函数怎么写，而是没想清楚：这个“变色”到底要响应什么——是视觉层次？可访问性对比度？还是主题语义？选函数前，先确认目标。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
