lighten() 和 darken() 基于 HSL 的 lightness 通道线性调整明度，需传入颜色和带 % 单位的百分比（如 15%），返回新颜色；不支持 CSS 变量或非 color 类型输入，且 fade()/transparentize() 仅改 alpha，无法替代其明暗感知效果。
less 中的 lighten() 和 darken() 函数怎么用？
这两个函数不是简单加减亮度，而是基于 HSL 色彩空间对 lightness 通道做线性调整，结果更符合人眼感知。传入颜色和百分比（如 20%），返回新颜色。
常见错误是把百分比写成小数（比如 0.2）或漏掉 % 符号——Less 会直接报错：error evaluating function `lighten`: argument must be a number with unit %。
-
lighten(#3498db, 15%)→ 更浅的蓝色（#5dace9） -
darken(#e74c3c, 10%)→ 更深的红色（#c93a2d） - 支持变量：定义
@primary: #2c3e50;后，可写background: lighten(@primary, 8%);
为什么 fade() 和 transparentize() 不能替代 lighten()？
fade() 和 transparentize() 都只改 alpha 通道，不改变明暗感知。比如对 #000 执行 fade(#000, 50%) 得到的是半透黑（视觉上仍是深灰），而 lighten(#000, 50%) 会得到接近 #808080 的中性灰。
实际场景中，按钮悬停变亮、菜单背景渐变、主题色衍生配色，必须用 lighten()/darken()；只有需要叠加透明层（如遮罩、阴影淡入）才考虑 fade()。
立即学习“前端免费学习笔记（深入）”；
-
fade(#2ecc71, 30%)→rgba(46, 204, 113, 0.3)（颜色不变，仅透明） -
lighten(#2ecc71, 30%)→#7ecf9c（饱和度略降，明度提升） - 二者混合使用也常见：比如
background: fade(lighten(@success, 10%), 90%);
在嵌套规则里动态计算颜色要注意什么？
Less 支持在任意作用域内调用函数，但变量作用域和计算时机容易混淆。比如在媒体查询或伪类中写 &:hover { color: darken(@text-color, 12%); } 是安全的；但如果 @text-color 在外层未定义，编译会失败，而不是静默 fallback。
- 避免在循环（
.loop(@i) when (@i > 0)）里反复调用高阶函数，可能拖慢编译速度 - 不要在
@import之前使用尚未引入的颜色变量——Less 按顺序解析，变量未声明即报错 - 推荐提前统一定义基础色板：
@blue: #3498db; @blue-light: lighten(@blue, 12%); @blue-dark: darken(@blue, 8%);
兼容性与输出 CSS 时的注意事项
所有 Less 内置颜色函数都在编译期执行，最终输出的是十六进制或 rgb 值，不依赖运行时 JS 或浏览器特性，所以完全兼容 IE9+。但要注意：如果原始颜色用了 CSS 变量（如 var(--primary)），Less 无法对其计算——函数只处理静态颜色字面量或变量值。
- 错误写法：
lighten(var(--primary), 10%)→ 编译报错 - 正确做法：在 Less 层定义
@primary: #3498db;，再生成对应 CSS 变量，或用 JS 运行时处理 CSS 变量 - 导出多个主题时，建议用
mix()替代多次lighten()，比如mix(@primary, white, 20%)更可控
真正难的不是调用函数，而是判断该用哪个函数、在哪一层抽象颜色逻辑——比如组件库里，是让每个组件自己算明暗，还是由设计系统统一导出一组预计算色阶？这个决策比语法本身影响更大。
