Less 4.x 中除法不再自动计算,必须显式用括号(如(100px / 4))或 ./(如100px ./ 4)标记,否则/视为CSS字面量,导致样式失效;@import须带.less后缀,函数参数须带单位,嵌套中父级@变量不可隐式访问。

Less 3.x 升级到 4.x 后,/(除法)行为彻底改变:它不再自动参与计算,而是原样输出为 CSS 字符,导致样式失效——这不是配置遗漏,是编译器硬编码规则。
除法必须显式标记,否则不计算
旧写法 width: 100px / 4; 在 v4 中直接输出 width: 100px / 4;,浏览器忽略该声明,DevTools 里看不到生效样式。
-
正确写法一:
width: (100px / 4);(推荐,语义清晰,单位混合安全) -
正确写法二:
width: 100px ./ 4;(注意./前后必须有空格;100px./4会报错) -
错误写法:
width: 100 / 4px;、line-height: 20px / 16px;、(100 / 4)px(单位后置非法)
@import 路径必须带 .less 后缀
v4 默认关闭路径推测机制,@import "mixins" 不再尝试匹配 mixins.less 或 mixins.css,而是严格按字面路径查找。
- 变量未定义、
ReferenceError: variable is undefined,大概率是导入失败,而非变量本身问题 - 必须显式写后缀:
@import "./variables.less";、@import "~antd/dist/antd.less"; - 用
~别名前,先确认node_modules/xxx下真实存在.less文件(如 Ant Design v5 已移除所有.less源码)
颜色与数学函数参数必须带单位
v4 移除了隐式单位推断,lighten(@color, 10) 这类写法直接报错,因为 10 不是合法数值类型。
- 颜色函数第二参数必须是百分比:
lighten(@color, 10%)、fade(@primary, 20%) -
percentage(1/2)输出字符串"1/2",应写成percentage((1/2))或percentage(0.5) -
round(10.4px)输出10px(保留单位),但round(10.4)输出纯数字10
嵌套中父级 @ 变量不可隐式访问
v4 强化块级作用域,嵌套选择器内部不再继承上层 @ 变量,.btn { @size: 12px; &-large { font-size: @size; } } 会报 Variable @size is undefined。
- 解决方式一:把变量提至文件顶层或全局作用域
- 解决方式二:在嵌套块内重新声明,如
&-large { @size: 12px; font-size: @size; } - 不能依赖
&自动“穿透”访问父级变量,这是设计变更,不是 bug
真正容易被忽略的是:/ 的行为由 Less 编译器底层硬编码决定,不经过任何配置项(math、strictMath 都不影响它),也不随构建工具变化——漏掉一个括号,就可能让某个组件样式静默失效,且无构建报错提示。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











