lighten()和darken()操作HSL明度L分量而非RGB加减，contrast()仅二选黑白且不检测WCAG对比度，mix()是RGB线性插值而非感知均匀，导致视觉结果与设计预期不符。
lighten() 和 darken() 不是 RGB 加减，contrast() 不检测 WCAG，mix() 是线性插值而非感知均匀——这些函数的行为和设计预期不一致，是 Less 颜色计算“返回值不对”的根本原因。
lighten() / darken() 明度调整不是“变亮/暗 X%”
它们操作的是 HSL 的 L 分量（0–100%），不是对 RGB 三通道做加减。比如 lighten(#0a2b5c, 40%) 是把原色的 L 值（约 18%）+40，得到 58%，视觉上可能发灰、偏青，而非你期望的“柔和提亮”。
- 极值色无效：
darken(#000, 20%)还是#000，L 已到下限无法再降 -
rgba颜色先转不透明再算：darken(rgba(0,0,0,0.5), 10%)实际按#000处理 - 百分比参数必须带
%：lighten(@c, 10)（缺%）会被当数值，行为异常
contrast() 只二选黑白，不校验可读性
contrast() 本质是判断明度是否 > 阈值（默认 0.43），然后返回你给的深色或浅色——它完全忽略 alpha 通道和 WCAG 4.5:1 要求。
-
contrast(rgba(52,152,219,0.8))忽略 0.8，只按#3498db算，返回#fff；但在半透背景上，白字很可能对比不足 - 漏写第二、三参数如
contrast(#3498db)等价于contrast(#3498db, #000, #fff)，若背景是灰色，黑/白都可能不可读 - 阈值设太高（如
0.7）会让中明度色全返回深色，导致浅底文字变黑、对比崩坏
mix() 是 RGB 线性混合，不是人眼感知灰阶
mix(@a, @b, 60%) 按通道做 0.6×R₁ + 0.4×R₂，而人眼对亮度的感知是非线性的（CIELAB L*）。设计稿里“70% 白”在 CSS 里用 mix(white, @color, 70%) 往往更亮，配色失真。
- 权重顺序不能反：
mix(#007bff, #fff, 20%)是 20% 主色 + 80% 白，不是 20% 白 - 传入非颜色值会直接报错：
mix(@c, "red", 50%)中"red"是字符串，不是颜色类型，编译失败 - 安全做法：调用前用
iscolor()判断，例如.text(@color) when (iscolor(@color)) { color: @color; }
嵌套调用和变量参与极易出错
Less 解析器对函数嵌套极其敏感：lighten(darken(#3498db,10%),5%) 会报错，因为它把 darken(...) 当作未定义函数名，而非子表达式。
- 空格和括号必须紧贴：
lighten( darken(...), ...)（换行或缩进）会中断解析 - 变量必须已定义且为 color 类型：
@base: #2ecc71;后才能用lighten(@base, 10%)，否则报Operation on an invalid type - 避免在 mixin 循环中反复调用颜色函数——每个调用都触发 JS 执行，大量使用会导致编译明显变慢
真正容易被忽略的是：这些函数的“错误结果”往往不报错，而是静默输出一个看似合法但视觉失准的颜色值。调试时不能只看编译是否通过，得把输出色值粘进取色工具里，对照 HSL L 值和实际渲染效果交叉验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
