自定义函数必须返回 Less AST 节点类型,如 new less.tree.Dimension(16, 'px') 或 new less.tree.Color([255,0,0],1),原始 JS 值会触发 TypeError;插件需显式注入,@plugin 已移除;Visitor 插件须返回新节点且正确判断节点类型。

自定义函数必须返回 Less 内部 AST 节点类型
直接 return 16 或 return '2rem' 会触发 TypeError: Cannot read property 'toCSS' of undefined——因为 Less 编译器只认它自己的节点类型,不接受原始 JS 值。
- 尺寸类:用
new less.tree.Dimension(16, 'px'),单位必须是字符串('em'、'rem'等) - 颜色类:用
new less.tree.Color([255, 0, 0], 1)或new less.tree.Color('#ff0000'),不能传字符串或对象 - 字符串类慎用
new less.tree.JavaScript('xxx'),仅限调试,生产环境会导致 CSS 输出不可控 - 函数名区分大小写:
px2rem()和Px2Rem()是两个不同函数,调用拼错就报Undefined function
插件必须显式注入,@plugin 指令已彻底移除
Less ≥3.0(尤其 4.0+)已删除 @plugin 语法,写它必报 Unknown rule: @plugin——这不是路径错或拼写错,是语法被砍掉了。
- CLI:用
lessc --plugin=./my-plugin.js input.less,路径相对于当前工作目录,不是 .less 文件位置 - Webpack +
less-loader:在options.plugins中传入数组,如plugins: [require('./my-plugin.js')],插件文件必须是 CommonJS 格式(module.exports = { install() { } }) - 浏览器环境:必须在
less.min.js加载前定义window.less = { plugins: [myPlugin] },否则less.plugins是undefined
Visitor 插件修改 AST 必须返回新节点,不能原地赋值
Visitor 是最常用的扩展方式,适合遍历 AST 做语义转换(比如统一转颜色、补单位),但它基于不可变 AST —— 任何 node.value = ... 都无效。
- 只匹配
node.name === 'color',避免误改background-color或border-color这类属性名 - 值节点类型不确定:可能是
less.tree.Color、less.tree.Variable或less.tree.Call,必须用instanceof判断,不能假设node.value.toCSS()一定返回字符串 - 要取变量真实值(如
@primary对应的#007bff),必须让 Visitor 实现isPreEvalVisitor() { return true; },再调node.value.eval(context)
mix()、lighten() 等内置函数不能替代自定义逻辑
mix() 只做 RGB 线性插值,lighten() 在 HSL 空间操作,两者混合使用会产生意外灰阶;而 color() 函数根本不是调色函数,只是从字符串提取颜色值。
立即学习“前端免费学习笔记(深入)”;
- 想实现 WCAG 合规的对比度自动选色?别裸用
contrast(),它只算亮度,不校验实际对比度;要用luma()+ 条件分支 - 想统一管理色系?用
@primary-h: 205; @primary-s: 70%; @primary-l: 55%;+hsl()变量,比硬写 HEX 值更可控 - mix() 的权重参数必须带
%单位,写成70或0.7会报error evaluating function `mix`: argument must be a percentage
toCSS is not a function 上,其实只是忘了包装成 less.tree.* 实例。


















