Less4.xCSSMath兼容设置技巧

Less 4.x 彻底重构了 CSS 数学运算规则，仅支持 `math: 1`（兼容模式，允许无括号除法）和 `math: 2`（严格模式，默认值，要求除法必须用括号 `(a / b)` 或 `./` 显式声明），而广为流传的 `math: "always"` 或 `"parens"` 等字符串配置已完全失效且被静默忽略；这一变更不仅导致未加括号的除法（如 `100px / 4`）不再自动计算、而是原样输出为无效 CSS，更深刻影响构建配置（需精准置于 `less-loader.options` 或 `vite.config.ts` 的 `css.preprocessorOptions.less` 下）、工具链行为（如 VS Code 插件不读项目配置）及第三方 UI 框架集成——许多样式异常实则源于框架源码中遗留的歧义除法表达式，而非配置缺失，盲目启用 `math: 1` 只能临时掩盖问题，无法替代对单位、运算优先级和构建作用域的系统性梳理。

Less 4.x 根本没有 always 或 parens 这类 math 模式配置项 —— 所有相关文档或教程里提到的，都是过时、混淆或错误的信息。

为什么你搜到的“math: always”在 Less 4.x 里不生效

这是最常被误传的一点：Less 4.0+ 彻底移除了旧版的 math 配置枚举（如 always、parens、parens-division）。它现在只接受整数 1 或 2，且语义已重定义：

• math: 1 → 兼容模式（允许无括号除法，如 100px / 4），但仅对 less-loader、vite.config.ts 等构建层有效，底层编译器仍按新规则解析
• math: 2 → 严格模式（除法必须加括号或用 ./），这是 Less 4.x 的硬编码默认行为
• 写 math: "always" 或 math: "parens" 会被静默忽略，等价于没配，最终走 math: 2

除法不加括号就失效：不是 bug，是设计强制

Less 4.x 把除法运算从“自动计算”改为“显式触发”。这意味着：

• width: 100px / 4; → 编译后原样输出 width: 100px / 4;，浏览器直接忽略该声明
• line-height: 20px / 16px; → 输出无效 CSS，行高不会变成 1.25
• 唯一有效的写法只有两种：(100px / 4) 或 100px ./ 4（注意 ./ 前后必须有空格）
• ./ 是 Less 特有语法，不是运算符；100px./4 会报错，(100 / 4)px 也会报 Operation on an invalid type

Webpack 和 Vite 中 math 配置真正起作用的位置

配置必须落在 Less 编译器启动时能读取到的地方，否则等于白写：

• Webpack + less-loader：必须写在 loader.options 里，不是插件外层对象中
  { loader: 'less-loader', options: { math: 1 } }
• Vite：必须嵌套在 css.preprocessorOptions.less 下，漏掉 preprocessorOptions 或拼错 key 名都会失效
  css: { preprocessorOptions: { less: { math: 1 } } }
• 命令行 lessc：参数必须用 --math=1，不能写成 --math="always"
• VS Code 插件（如 Easy Less）不读取项目配置，只认 Less 4.x 内置规则 —— 所以即使你配了 math: 1，插件预览仍可能报错

UI 框架样式异常的真实原因往往不是 math 配置

像 view-ui-plus 这类基于 Less 的 UI 库，升级到 Less 4.x 后出现图标丢失、尺寸错乱等问题，90% 不是因为没配 math，而是：

• 框架源码里存在未加括号的除法（如 @icon-size: 16px / 2;），而你用了 math: 2（默认）导致编译失败
• 你覆盖了框架变量但没同步更新其内部计算逻辑，比如改了 @font-size-base，但框架某处写了 @line-height-base * @font-size-base 却没检查单位兼容性
• math: 1 能临时掩盖问题，但无法修复框架源码中本就存在的歧义表达式（例如 @a + @b / 2 在人眼和编译器眼里优先级不同）

真正容易被忽略的是：你改的那行 math: 1 只影响你自己写的 Less 文件，不影响 node_modules 里 UI 框架的编译过程 —— 除非你把框架源码也纳入构建流程并确保它的 .less 文件走同一套配置。

今天关于《Less4.xCSSMath兼容设置技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！