Less 4.x 无 Math 模式配置,除法仅在括号内或用 ./ 时计算;否则原样输出导致 CSS 错误。正确写法:(100px / 4) 或 100px ./ 4;乘加减无需括号但需单位兼容。

Less 4.x 中根本不存在 Math 模式(Math mode)配置项,也没有 Always 或 Parens 这类开关。这是常见误解——它源自对 Sass 配置(如 math: always)的混淆,或对旧版 Less 文档的误读。
Less 自 4.0.0 起已硬编码除法行为:仅当表达式被小括号包裹,或使用 ./ 时才执行数学除法;其余情况(如 10px / 2)会被原样保留为 CSS 除号,不计算。
所以你不需要、也无法通过配置开启“Math 模式”。关键只在写法。
除法不加括号 → 编译失败或输出无效 CSS
比如写 width: 100px / 4;,Less 4.x 会直接输出 width: 100px / 4;,浏览器报错或忽略该声明。
- 浏览器解析失败:CSS 中
/不是运算符,仅用于font、background等简写属性分隔 - 构建工具(如 lessc)不会报错,但样式不生效,容易误以为是逻辑问题
- VS Code 插件(如 Easy Less)同样遵循此规则,不会自动补括号
正确写法只有两种,且必须显式写出
所有涉及除法的地方,必须手动选择以下任一形式:
-
width: (100px / 4);—— 推荐:语义清晰,兼容性好,支持单位参与运算(如(2rem / 2)) -
width: 100px ./ 4;——./是 Less 特有语法,强制触发除法;但注意:./左右必须有空格,否则解析失败(100px./4会报错)
反例:width: 100 / 4px; 或 width: (100 / 4)px; —— 后者单位位置错误,Less 会报 Operation on an invalid type
乘法、加减法不受影响,但要注意单位混合
+、-、* 可直接写,无需括号。但单位不匹配仍会报错:
-
height: 10px + 2em;→ 报错:单位不可加 -
margin: 10px * 2;→ 正确:输出margin: 20px; -
line-height: 20px / 16px;→ 错误:除法未括起,输出原样;应写成line-height: (20px / 16px);→ 输出line-height: 1.25;
真正容易被忽略的是:除法行为是全局硬编码的,没有配置入口,也不受构建工具参数影响。哪怕你用 Webpack + less-loader,只要底层是 Less 4.x,就绕不开括号或 ./。漏掉一个括号,就可能让某个组件高度塌陷却查不出原因。










