fade()调整Alpha通道（透明度），darken()操作HSL的L通道（亮度）；二者用途不同，不可混用或链式嵌套，需先darken再fade或用mix()实现复合效果。
fade() 和 darken() 根本不是一类函数，混用前得先分清用途
fade() 调整的是 Alpha 通道（透明度），输入 @color 和一个 0–100 的整数，输出带 alpha 的 rgba() 值；darken() 操作的是 HSL 的 L（亮度）通道，只改变明暗，不碰透明度。两者不能互换，也不能链式嵌套来“同时调明暗和透明”——fade(darken(@c, 10%), 30) 看似合理，但编译后 alpha 是 30%，而 darken 已把颜色压暗，视觉上可能过重又发灰。
常见错误现象：fade(#000, 0) 输出 rgba(0, 0, 0, 0)（全透明），不是“变亮”；darken(#fff, 5%) 返回 #fff（L 已达上限，无法再暗）。
-
fade()适合生成禁用态、遮罩层、半透按钮等需要透明度的变体 -
darken()更适合悬停加深、边框加暗、深色背景上的文字强调等纯明暗场景 - 若需“既变暗又带透明”，应分开控制：先用
darken()得到目标色，再用fade()加 alpha；或直接用mix(@color, black, 20%)更可控
批量生成配色方案必须靠循环 mixin，硬写变量不可维护
别这样写：@primary-100: @primary; @primary-200: darken(@primary, 5%); @primary-300: darken(@primary, 10%);——改步长要逐行改，加一层就得补一行，5 分钟就晕。
正确做法是用递归 mixin 配合 list 定义步长，比如：
立即学习“前端免费学习笔记（深入）”；
.primary-tone-loop(@i: 1) when (@i =< 5) {
@step: extract(5%, 10%, 15%, 20%, 25%, @i);
@name: ~"primary-@{i}00";
.@{name} {
background-color: darken(@primary, @step);
}
.primary-tone-loop(@i + 1);
}
.primary-tone-loop();这样生成 .primary-100 到 .primary-500，只需改 extract() 里的 list 就能全局重算。
- list 中数值建议用百分比单位（
10%），不是裸数字（10），否则darken()报错 - 步长别超过原始色 L 值的 40%（可用在线 HSL 工具查），否则结果趋近纯黑/纯白，失去辨识度
- 如果要同时出 fade 版，另起一个 loop：
color: fade(@primary, 90 - @i * 10);，注意@amount是目标透明度，不是减量
fade() 参数陷阱：传变量时务必确保是 number 类型
fade(@primary, @alpha) 看起来没问题，但如果 @alpha 是字符串（比如从 JSON 导入或拼接而来），Less 会静默转为 0，结果变成 rgba(r,g,b,0)——页面元素直接消失，调试极难定位。
安全写法：
- 声明时强制 number：
@alpha: 80;，不用@alpha: "80"; - 用
isnumber()做简单校验（虽不能 runtime 报错，但可提醒自己）：.if-number(@a) when (isnumber(@a)) { color: fade(@primary, @a); } - 避免从
@import的外部文件传未校验的字符串变量，尤其涉及主题配置 JSON 转 Less 的场景
另外，fade() 对已带 alpha 的颜色（如 rgba(0,0,0,0.6)）是**覆盖**行为，不是叠加：fade(rgba(0,0,0,0.6), 30) → rgba(0,0,0,0.3)，原始 0.6 被丢弃。
深色模式下慎用 darken()，优先用 mix() 或双色系
在深色背景（如 #121212）上调用 darken(@bg, 10%)，结果仍是接近纯黑，毫无层次；而 fade(@bg, 90) 又太透，看不出变化。
更稳妥的做法：
- 弃用单色推导，定义独立深色系变量：
@primary-dark: #bb8f00;，再基于它跑 loop - 用
mix(@color, #000, 15%)替代darken()，它在 RGB 空间线性混合，对深色更友好 - 对文字反色，先用
contrast()拿底线色，再微调：lighten(contrast(@bg, #000, #fff), 5%)，比纯darken()更耐看
真正容易被忽略的是：darken() 和 fade() 都在编译期执行，它们无法响应运行时主题切换。如果你用 JS 切换 data-theme="dark"，这些 Less 生成的类名不会自动更新——配色方案必须提前编译好两套，或改用 CSS 变量 + var(--primary-200) 方案。
