lessc --strict-math=on 是启用严格数学运算的唯一方式,强制除法必须加括号,否则报 ParseError,并推动 calc() 插值改用 ~"calc(... @{var})" 形式。

lessc --strict-math=on 是启用严格数学运算的唯一方式
Less 默认对除法不加括号就放行(如 68 / 37.5rem),结果不是报错,而是静默产出错误值或编译中断。启用严格模式后,所有除法必须显式加括号,否则直接报 ParseError,强制你暴露并修复歧义表达式。
这不是配置项开关,而是命令行编译参数——它不写在 Less 文件里,也不通过 JS API 配置项传;必须在调用 lessc 时带上:
lessc --strict-math=on style.less style.css- Webpack 中需配置
less-loader的math选项:{ math: 'always' }(注意:v11+ 已改用math: 'strict') - Vite 用户需在
vite.config.ts的css.preprocessorOptions.less中设math: 'strict'
为什么 strict-math 能防住 calc() 里的变量失效
表面看 strict-math 只管除法,但它间接堵住了最常被误用的“伪 calc”写法:比如把 width: 100% / 3 - 10px 当作响应式计算。这种写法在非 strict 模式下会编译成 width: 33.33333333% - 10px,浏览器根本无法解析;而 strict 模式直接拒绝该语句,逼你改用 ~"calc(100% / 3 - 10px)" —— 这才真正交由浏览器运行时处理。
常见错误场景包括:
立即学习“前端免费学习笔记(深入)”;
- 写
@gap: 20px; margin: 100% / 2 - @gap;→ 编译失败,提示 “division requires parentheses” - 本意是
100% / (2 - @n),却漏括号写成100% / 2 - @n→ strict 模式立刻拦截 - 混用单位:
10px / 2em→ 报Operation on an invalid type,不再静默忽略
strict-math=on 后仍要手动处理 calc() 插值
启用 strict-math 并不自动修复 calc() 里的变量问题。它只管 Less 自身的数学节点,而 calc() 仍是原始字符串节点——你依然得用 ~"" + @{var} 才能让变量展开。
正确写法只有这一种组合:
-
height: ~"calc(100vh - @{header-height})";✅ -
height: calc(100vh - @header-height);❌(即使开了 strict-math,也照样输出字面量) -
height: ~"calc(100vh - @header-height)";❌(@{header-height}写成@header-height,插值不触发)
注意:~"" 内不支持 @{var} 以外的插值语法,${@var} 在新版 Less 中已弃用;所有参与 calc 的变量,单位必须明确(如 @header-height: 64px),不能是纯数字。
容易被忽略的副作用:嵌套作用域与媒体查询重定义失效
strict-math 不影响作用域逻辑,但会让问题更早暴露:比如你在 @media 块里重定义 @gap,然后在同个块里写 padding: 100% / 3 - @gap;,strict 模式会报错——因为除法上下文里 @gap 是带单位的,而 100% / 3 是百分比,单位不可通约。
这恰恰提醒你:Less 的所有运算都是编译期静态行为,媒体查询中重定义的变量不会回溯修改已生成的 calc 表达式,也不会影响外层已计算完的值。真正需要动态响应的,必须交给 calc() + ~"" + 显式插值,别指望 strict-math 让它变“活”。


















