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 让它变“活”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
