darken()和lighten()直接调整HSL的lightness通道，易致溢出或色相挤压；应优先提取hue/saturation/lightness分量手动组合，并配合saturate()/desaturate()优化深浅色阶。
直接写 darken(#3498db, 20%) 或 lighten(#3498db, 20%) 会生效，但结果常和设计预期不一致——这不是函数写错了，而是你没控制住 HSL 的 lightness 溢出和色相挤压。
darken() 和 lighten() 实际干了什么
它们不是“加黑/加白”，而是对颜色的 HSL 表示中 lightness 通道做固定数值增减（单位是百分点，0–100）。比如 lighten(#1a1a1a, 30%) 是把 L 值从 ≈7% 提到 37%，不是“混合 30% 白色”。
- 对极暗色（
lightness ）用darken()容易一步变#000，文字消失 - 对极亮色（
lightness > 85%）用lighten()几乎无效，或直接跳成#fff - Less 不校验输入是否为合法颜色值：传
rgba(0,0,0,0.5)给lighten()会报Operation on an invalid type - 函数返回的是新颜色值，不是变量引用；重复调用不会累积效果：
lighten(lighten($c, 10%), 10%)≠lighten($c, 20%)（因中间色的 HSL 已变）
什么时候该换 mix() 而不是用 lighten()
当你需要“视觉上更柔和地提亮”或“确保灰阶过渡均匀”，mix() 比 lighten() 更可控——它走 RGB 加权平均，虽非感知均匀，但至少不畸变色相。
- 生成中性灰阶时优先用
mix(@color, white, 30%)而非lighten(@color, 30%)，尤其当@color是深蓝、深紫等高饱和色 - 想模拟“半透明白罩层”效果，
mix(white, @color, 20%)比lighten(@color, 20%)更接近 Figma 中的叠加模式 - 注意：mix(black, @color, 40%) 对红/橙系色会产生偏棕倾向，此时应改用
darken(@color, 15%) + saturate(@color, 5%) - 别在
mix()里混入带 alpha 的颜色（如rgba()），Less 无法解析其通道，会编译失败
如何安全地批量生成深浅色阶
硬写 lighten(@primary, 10%)、lighten(@primary, 20%)… 很快失控。真正可维护的方式是提取 HSL 分量再算，而不是依赖 magic number。
- 先用
hue(@primary)、saturation(@primary)、lightness(@primary)拆出基础值，再组合：hsl(hue(@primary), saturation(@primary) + 5%, lightness(@primary) - 12%) - 深色系阶梯建议：降
lightness()同时微升saturation()（+3%～8%），避免发灰 - 浅色系阶梯建议：升
lightness()同时微降saturation()（-2%～5%），防刺眼 - 用
unit(lightness(@color), %)确保返回值是带 % 单位的数字，否则参与 calc 会出错 - Less 不支持原生 for 循环，所谓“循环生成”靠递归 mixin，漏掉
when (n > 0)守卫就会无限编译报错
容易被忽略的兼容与验证环节
Less 编译完只是静态 CSS，它不管你在哪台设备上看、背景是白是黑、屏幕是 OLED 还是 LCD。
- 所有生成的颜色必须在真实设备上验色，OLED 屏对低饱和深色极其敏感，
darken(#2c3e50, 10%)在 Mac 上看着正常，在 Pixel 手机上可能糊成一片 - 不要依赖浏览器开发者工具里的拾色器显示的 “LCH Lightness” 值来反推 Less 行为——Less 用的是标准 HSL，而 DevTools 显示的是转换后的近似值
- 若项目需支持深色模式，
lighten()不能直接套用：同一调用在浅色主题下让按钮变亮，在深色主题下可能让文字对比度跌破 WCAG 4.5:1 - 最终上线前，用
getComputedStyle(el).color检查实际渲染值，确认没有意外变成transparent或rgb(NaN, NaN, NaN)（常见于对#fff连续darken()）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
