fade()只接受合法color值,传入字符串字面量、CSS变量或未定义变量会报错;可用iscolor()守护降级。

fade() 传入非 color 类型会静默失败或报错
Less 的 fade() 只接受合法 color 值,比如 #3b82f6、rgb(37, 99, 235) 或已定义的 color 变量。一旦传入字符串字面量(如 "#3b82f6")、CSS 自定义属性(如 var(--primary))或未定义变量,行为分两类:
- 带引号字符串:
fade("#3b82f6", 70%)→ 编译报错Error evaluating function `fade`: color expected - CSS 变量:
fade(var(--primary), 70%)→ Less 编译期无法读取运行时值,直接跳过或报错 - 未定义变量:
fade(@missing, 70%)→ 报错Cannot resolve variable @missing;可用iscolor()守护降级:@safe: iscolor(@c) then fade(@c, 70%) else rgba(#000, 0.7)
mix() 在冷色上容易生成视觉“脏灰”,不是设计稿想要的中性灰
mix(white, @color, 60%) 看似是“加 60% 白”,实际是 RGB 通道线性加权平均,和 Figma/Sketch 使用的 CIELAB L*(感知均匀亮度)不一致。同一混合比例下,视觉明度偏差可达 ±20%。
- 对蓝色主色
#4A90E2:mix(white, #4A90E2, 50%) →#bdcff1,偏青灰,不像设计稿里干净的浅蓝 - 对红色主色
#ef4444:mix(black, #ef4444, 30%) →#a83030,发暗发浊,不如darken(#ef4444, 18%)控制精准 - 真正可控做法:先用
hue()、saturation()、lightness()拆解原色,再组合调整,例如:hsl(hue(@c), saturation(@c) - 5%, lightness(@c) + 12%)
fadeout() 和 fadein() 与 opacity 不等价,但更安全
fadeout(@color, 30%) 不等于 fade(@color, 70%),也不等于 rgba(..., 0.7) —— 它是把 alpha 通道从当前值往 0 方向减去指定百分点(绝对值),而 fade() 是直接设为指定透明度值。
- 若原色是
rgba(37, 99, 235, 0.8),fadeout(@c, 30%)→ alpha = 0.5;fade(@c, 30%)→ alpha = 0.3 - 对纯 HEX 颜色(无 alpha),
fadeout()和fade()行为一致,都转成rgba() - 优势:
fadeout()更适合 hover 状态渐变逻辑(比如“当前透明度再减 20%”),避免写死目标值
mix() 与 lighten()/darken() 混用时,顺序影响结果
颜色函数调用顺序不可逆,lighten(mix(white, @c, 40%), 10%) ≠ mix(white, lighten(@c, 10%), 40%)。前者先混色再提亮,后者先提亮再混色,HSL 插值非线性 + 四舍五入,差值常达 1–2% L。
- 典型误用:
mix(lighten(@c, 10%), darken(@c, 10%), 50%)本意是取中间色,结果却比原色略灰(因两个衍生色饱和度已不同) - 可靠替代:
hsl(hue(@c), saturation(@c), lightness(@c))直接控制明度中点,无中间计算损耗 - 调试技巧:用
unit(lightness(@c), %)输出数值,确认当前 L 值再决定加减量
所有函数都依赖输入类型是否为 color,而 Less 不会在运行时做类型兜底——传错类型不会“尽力而为”,只会中断或静默失效。最稳妥的起点,永远是用 hsl() 变量定义主色,并全程基于 hue/saturation/lightness 分量运算。

















