Less 4.x 中裸露的 / 不参与计算,必须写成 (100px / 4) 或 100px ./ 4;前者更推荐,后者需空格;math 配置对除法无效,strictMath 仅影响无单位运算。

Less 4.x 中除法不加括号就根本不会计算,不是配置能改的,必须手动改写法 —— (100px / 4) 或 100px ./ 4 是仅有的两种有效写法。
为什么 100px / 4 编译后无效
Less 4.x 把所有裸露的 / 当作 CSS 字面量保留,不参与运算。比如 width: 100px / 4; 会原样输出为 width: 100px / 4;,浏览器解析失败,该声明被静默丢弃(DevTools 里显示为灰色、无报错)。
-
line-height: 20px / 16px;→ 输出仍是line-height: 20px / 16px;,行高不生效 -
@icon-size: 16px / 2;→ 变量值变成字符串"16px / 2",后续引用全崩 - VS Code 的 Easy Less 插件(1.7.0+)也遵循此规则,不会自动补括号
(100px / 4) 和 100px ./ 4 怎么选
两者语义等价,但细节影响可维护性:
-
(100px / 4)是首选:支持嵌套单位(如(2rem / 2)),可读性强,和calc()风格一致 -
100px ./ 4是 Less 特有语法:./必须与左右操作数各有一个空格;100px./4或100px . / 4都会解析失败 - 反例:
(100 / 4)px报Operation on an invalid type;100 / 4px单位位置错,结果不可预期
别再白配 math 参数
math: "always"、math: 1、strictMath 全部和除法是否执行无关:
立即学习“前端免费学习笔记(深入)”;
- Less 4.x 已移除
math: "always"等字符串配置,只认整数math: 1或math: 2,且仅影响部分构建工具对旧代码的兼容提示,**完全不改变除法行为** - Vite 中写
css.preprocessorOptions.less.math = "always"无效;Webpackless-loader传{ math: 'always' }等同于没写 -
strictMath控制的是无单位数值能否参与运算(如10px + 5),对100px / 4完全没作用
乘、加、减为什么不用括号却仍可能出错
+、-、* 本身不要求括号,但单位兼容性检查照常生效:
-
margin: 10px * 2;→ 正确,输出margin: 20px; -
height: 10px + 2em;→ 报错:单位不可加 -
font-size: 14px + 2;→ 若strictMath: false可能隐式转成14px + 2px,但不推荐依赖 - 混合运算如
@a + @b / 2即使math: 1也建议加括号明确优先级:@a + (@b / 2)
漏掉一个括号,可能让整个组件高度塌陷,而构建过程不报错、控制台无提示 —— 你得手动检查生成的 CSS 文件,或用工具扫描含 / 的声明行,确认是否被原样输出。


















