Less里用lighten()和darken()生成深浅色时，为什么结果不自然？
因为这两个函数只是线性调整亮度，对饱和度和色相不做协调处理，尤其在蓝色、紫色等冷色上容易发灰或偏青。比如lighten(#4A90E2, 20%)会得到一个苍白的蓝，而不是视觉上“更亮但依然干净”的版本。
实操建议：
- 优先用
fadeout()或saturate()组合替代纯lighten()，比如lighten(saturate(#4A90E2, 10%), 8%) - 对主色做深浅阶梯时，固定步长别超过12%，否则相邻色阶对比过强
- 避免对已带透明度的颜色（如
rgba(…)）再套lighten()——Less会报错Operation on an invalid type
如何用hsl()手动控制调色板的明度与饱和度？
Less支持直接写hsl(h, s, l)，也支持从颜色提取hue()、saturation()、lightness()，这才是可控生成调色板的核心路径。
常见错误：直接改lightness()值却不重设saturation()，导致深色变浊、浅色变粉。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 深色系：降低
lightness()的同时，适当saturate()5–10%，比如hsl(hue(@primary), saturation(@primary) + 8%, lightness(@primary) - 18%) - 浅色系：提升
lightness()同时，略微desaturate()3–5%，避免刺眼 - 用
unit(lightness(@color), %)确保返回值是百分比数字，方便参与计算
用mix()按比例混合黑白生成中性灰阶，但为什么和设计稿对不上？
mix()本质是RGB通道加权平均，不是感知均匀的灰度算法。设计工具（Figma/Sketch）默认用L*（CIELAB）亮度，而mix(white, @color, 70%)出来的“70%白”在人眼看来可能只有50%亮。
使用场景：适合快速搭骨架、临时占位；正式调色板必须校准。
实操建议：
- 先用
lightness()查出目标色的明度值，再反推mix()比例：比如想得到明度30%的灰，可用mix(black, white, 70%)（因为black=0%, white=100%，70% white ≈ 70%明度）→ 实际要的是30%，所以用mix(black, white, 30%) - 对非灰阶色慎用
mix()生成深色——mix(black, #FF6B6B, 40%)会偏棕，不如用darken()+saturate() - 所有
mix()结果务必在真实设备上验色，尤其OLED屏对低饱和深色敏感
Less变量+循环生成调色板时，for语法不生效怎么办？
Less原生不支持for循环，所谓“循环生成”其实是用.loop()递归mixin模拟的，漏掉when守卫或终止条件就会无限编译报错Recursive call to mixin。
性能影响明显：10阶调色板若每阶都调3个函数，编译时间翻倍；超过15阶可能触发Node.js栈溢出。
实操建议：
- 必须写守卫：
.generate-palette(@i) when (@i > 0) { ... .generate-palette(@i - 1); }，且初始调用要带起始值，如.generate-palette(5) - 把基础色存为
@base-h: hue(@primary)等变量，避免每次递归都重复调用hue() - 真需要12阶以上？放弃Less自动生成，用JS脚本预生成CSS变量，Less只负责消费
--color-50这类变量
调色板最难的不是算色，是让深色足够可读、浅色不发虚、中间色不撞车——所有函数都得为这个服务，而不是反过来让人去适应函数的数学逻辑。
