color()函数不能生成调色板，因其仅解析颜色字符串（如"#ff6b6b"）为color对象，不支持色相偏移、明度调整等计算；真正用于动态生成调色板的是lighten()、darken()、hsl()等函数，需配合hsl变量拆解与递归mixin实现可维护色阶。
color() 函数不能动态生成调色板——它只是解析颜色字符串，不参与任何计算或变换。
真正能生成调色板的是 lighten()、darken()、saturate()、hsl()、mix() 这些函数，配合变量和递归 mixin 才能落地。
为什么 color() 不能用在调色板生成里？
color() 的唯一作用是把合法 CSS 颜色字符串（如 "#ff6b6b" 或 "tomato"）转成 Less 内部 color 对象。它不接受偏移参数，也不返回新颜色。
- 写
color("blue" + 10)→ 编译报错：Operation on an invalid type - 试图用它做色相加减、明度调整，属于根本性误用
- 它连
lightness(@color)这种提取值的能力都没有——那是lightness()函数干的事
怎么用 hsl() + 变量定义可维护的主色系？
硬写十六进制（如 @primary: #4A90E2）会导致换主题时全局搜替换，极易漏。换成 HSL 参数拆解，所有衍生色都能推导：
-
@primary-h: 216;（色相，0–360） -
@primary-s: 65%;（饱和度） -
@primary-l: 57%;（明度） - 主色：
@primary: hsl(@primary-h, @primary-s, @primary-l); - 浅色变体：
@primary-light: hsl(@primary-h, saturation(@primary) - 5%, lightness(@primary) + 12%); - 深色变体：
@primary-dark: hsl(@primary-h, saturation(@primary) + 8%, lightness(@primary) - 18%);
这样改深色模式只需调 @primary-l 范围（比如从 57% → 28%），不用重写整套规则。
递归 mixin 生成多档色阶时，为什么 extract() 和守卫必须配对？
Less 没有原生 for 或 each，所谓“遍历”全靠递归 mixin 模拟。漏掉守卫（when）会触发无限编译：
-
.make-palette(@list, @i: 1) when (length(@list) >= @i)—— 这行守卫是终止开关 -
@color-name: extract(@list, @i)提取第@i个颜色名（如"blue"） - 再用
@@color-name动态引用变量@blue，否则lighten("blue", 10%)会失败（字符串不是颜色） - 必须用
slice(@list, 1)或@i + 1推进，否则卡死
常见错误：.make-palette("blue red", 1); 但没定义 @blue 和 @red 变量 → 编译报错 Variable @blue is undefined。
用 mix() 生成灰阶时，为什么设计稿常对不上？
mix(white, @color, 70%) 算的是 RGB 加权平均，不是人眼感知亮度（CIELAB L*）。Figma 里标“70% 白”的灰，在 Less 里用 mix() 得到的可能是视觉上只有 50% 亮。
- 正确做法：先用
lightness(@color)查出目标色明度，再反推比例 - 想得到明度 30% 的灰？用
mix(black, white, 30%)（因为 black=0%，white=100%，30% white ≈ 明度 30%） - 对非灰阶色慎用
mix(black, #FF6B6B, 40%)—— 容易偏棕；改用darken(#FF6B6B, 15%) + saturate(5%)更可控 - 所有
mix()结果务必在 OLED 屏上实测，低饱和深色在不同屏幕差异极大
真正难的不是写对一行 lighten()，而是让整套色阶在不同设备、不同背景、不同对比度要求下都保持可用——这需要把 luma() 值纳入判断逻辑，而不是依赖函数自动“选色”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
