Less不支持运行时函数扩展，所有颜色逻辑必须在编译期用内置函数（mix、darken、lighten、contrast）组合实现；自定义行为需靠mixin模拟，且mix权重须带%单位，contrast四参数仅限3.5+版本。
Less 本身不支持运行时函数扩展，所有自定义颜色逻辑必须在编译期完成，且只能基于内置函数组合实现——mix()、darken()、lighten()、contrast() 是你真正能用的“积木”，别指望像 JS 那样写 function myHslShift() {}。
Less里没法写真正的自定义函数
Less 的 .less 文件最终要被编译成纯 CSS，所有计算发生在构建阶段。它没有模块导出、没有闭包、不支持用户定义的函数签名或递归调用。所谓“扩展函数”，实际是通过 mixins 模拟行为，或靠多个内置函数嵌套组合达成近似效果。
-
mix()是最可靠的 RGB 线性插值工具，适合做色阶衍生，但权重必须带%单位，写mix(@a, @b, 0.7)直接报错：error evaluating function `mix`: argument must be a percentage -
contrast()只在 Less 3.5+ 支持四参数形式，旧版（如 Webpack less-loader 封装的 3.0.x）会抛Operation on an invalid type；检查版本用lessc --version - 不要尝试用
spin()或saturate()处理文字反色——它们改变色相或饱和度，而可读性依赖明度（L 值），不是色调
用 mixins 模拟“函数调用”接口
虽然不能定义函数，但可以用带参数的 mixin 封装常用颜色逻辑，让调用看起来像函数：
.text-on-bg(@bg) {
color: contrast(@bg, #000, #fff, 0.43);
}
.text-on-bg-light(@bg) {
color: lighten(contrast(@bg, #000, #fff), 5%);
}
- 调用时写
.text-on-bg(#222);，编译后直接输出color: #fff; - 注意 mixin 内部不能 return 值，只能生成样式规则；想提取颜色变量？得靠顶层
@var: contrast(...);，再 elsewhere 引用 - 嵌套太深（比如
lighten(darken(mix(...), 10%), 5%)）会导致中间色精度丢失，尤其 Less 3.4 及更早版本
mix() vs darken()/lighten()：选哪个取决于你控什么空间
如果你需要“加黑/加白”的视觉直觉效果（比如按钮悬停加深），mix(@color, black, X%) 比 darken(@color, X%) 更可控；后者操作 HSL 的 L 通道，高饱和色容易发灰。
立即学习“前端免费学习笔记（深入）”；
-
mix(#ff6b6b, black, 20%)→#cc5555（保留红相，仅压暗） -
darken(#ff6b6b, 20%)→#cc4d4d（结果接近，但 HSL 转换中轻微偏橙） - 浅灰背景上用
lighten(#333, 15%)得到#5c5c5c，WCAG 对比度可能不足；换成mix(#333, #ffffff, 60%)更协调 - 避免
mix(@a, transparent, 30%)——transparent 会被转成rgba(0,0,0,0)，混出来发灰，改用fadeout(@a, 30%)
真要动态？Less 不是干这事的
Less 编译完就结束了。如果你需要点击切换主题色、拖动滑块实时变渐变、根据用户偏好自动适配——这些必须交给 CSS 自定义属性 + JS 控制，Less 只负责提供兜底静态值或生成初始变量集。
- 例如：定义
@primary: #007bff;，然后在 CSS 中写--primary: var(--theme-primary, @{primary}); - JS 修改
document.documentElement.style.setProperty('--theme-primary', '#ff6b6b'); - Less 里的
mix()或contrast()永远不会感知这个变化，它们只在构建时跑一次
最容易被忽略的一点：所有颜色函数输出都是不透明色（alpha = 1），哪怕输入是 rgba(0,0,0,0.5)，mix() 也只取 RGB 分量——想保留透明度，得手动拼 fade() 或用 JS 动态生成。
