Less 4.x 的 math 配置是编译器初始化参数，须置于正确位置：Vite 在 css.preprocessorOptions.less 下，Webpack 在 less-loader options 中，命令行用 --math=always；math: 'always' 会计算所有括号内表达式，而 'parens-division' 仅严格约束除法。
math配置不生效？检查它是否落在编译器启动时的正确位置
Less 4.x 的 math 配置不是运行时开关，而是编译器初始化参数。写错位置等于没写——比如在 vite.config.ts 里把它塞进 css.postcss 或 build.rollupOptions，完全不会被读取。
必须确认它处于 Less 编译器能直接接收的层级：
- Vite：必须嵌套在
css.preprocessorOptions.less下，不能平级放在css或build里 - Webpack + less-loader：必须写在
less-loader的options中，且确保你没误装旧版less-loader（Vite 5+ 不要装） - 命令行
lessc：用--math=always或-m=always，不是--strict-math（该参数已在 4.x 移除）
math: 'always' 和 math: 'parens-division' 的实际行为差异
默认值 math: 'parens-division'（即 v4 新默认）只对除法加括号要求严格，其它运算（+、−、*）仍可无括号；而 math: 'always' 会让所有括号内表达式都求值——这既是便利，也是陷阱。
常见踩坑点：
-
font-size: (@base * 1.2);在math: 'always'下会被计算成font-size: 14.4px;，但如果你本意只是分组（比如避免与 CSS 自定义属性冲突），就会意外破坏原意 -
background: url("icon.png?w=" + @width);这种字符串拼接，在math: 'always'下会尝试把@width当数值参与运算，若@width是auto或100%就直接报错 -
math: 'parens-division'下，10px / 2报错，但(10px) / 2或10px ./ 2（注意空格）可工作；不过./已被标记为 deprecated，别依赖
第三方 UI 库样式异常？大概率是 math 模式和库源码不匹配
像 view-ui-plus、ant-design v4 等库的 Less 主题文件，很多是按 Less 3.x 的 math: 'always' 行为写的。升级到 Less 4 后，默认 parens-division 会让原本能算的 @primary-color / 2 类表达式失效，结果变量未定义或计算中断，最终样式丢失（比如 InputNumber 图标高度为空）。
临时解法简单粗暴：
- Vite 项目：在
vite.config.ts中设math: 'always' - Webpack 项目：在
less-loader options里加math: 'always' - 但长期建议：查清库文档是否已适配 Less 4，或 fork 后显式补括号，例如把
@primary-color / 2改成(@primary-color) / 2
单位丢失、计算结果意外为纯数字？和 math 模式无关，但常被误判
math 配置控制“是否计算”，不控制“单位怎么继承”。比如 @base: 8; @gap: @base * 1.5px; 能出 12px，但 @gap: 1.5 * @base px; 会因空格导致解析失败，输出 12 px（带空格的字符串，非合法 CSS 值）。
这类问题不会因改 math 配置而解决，必须盯住操作数顺序和空格：
- 单位必须紧贴数值或变量，
1.5px✅，1.5 px❌ - 乘法中带单位的操作数尽量放左边：
1.5px * @base比@base * 1.5px更稳（Less 解析器对左结合更友好） - 用
unit()显式包装时，记得开启javascriptEnabled: true，否则静默失败
最易被忽略的是：math 配置只管“算不算”，不管“算得对不对”——单位、作用域、路径这些，得各自单独对症。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
