strictMath 仅限制加减法中无单位数值的参与,不控制除法执行;除法必须用括号或 ./ 显式声明,否则被当作 CSS 字面量忽略;单位运算需主动换算,不可依赖配置放宽规则。

strictMath 不控制除法是否执行,只影响无单位数值参与加减时的行为
strictMath: true 仅在加减中强制单位一致
它不会让 100px / 4 突然开始计算,也不会修复 line-height: 20px / 16px 这种写法。它的作用范围非常窄:
- 当
strictMath: true时,10px + 5直接报错:Operation on an invalid type(因为5没单位,10px有单位) - 当
strictMath: false(默认),10px + 5可能被隐式当作10px + 5px计算,但结果不可靠、不推荐依赖 - 乘除法不受
strictMath影响:10px * 2和10px / 2始终合法,无论该配置为何值
Less 4.0 的除法必须加括号或用 ./
立即学习“前端免费学习笔记(深入)”;
这是编译器层面的语法变更,和任何配置都无关。所有未包裹在括号里的 / 都被当 CSS 字面量保留,浏览器静默丢弃整条声明:
-
width: 100px / 4;→ 输出width: 100px / 4;→ 浏览器忽略 -
width: (100px / 4);→ 输出width: 25px;✅ -
width: 100px ./ 4;→ 输出width: 25px;✅(注意空格:必须是./,不能是./4或./ 4) -
math: "always"、math: 1等配置在 Vite/Webpack 中已失效,不改变除法行为
unit() 和 round() 才是处理单位运算的实际工具
想安全做跨单位运算(比如 rem 转 px 后再除),不能靠配置“放宽规则”,而要主动剥离、换算、再计算:
-
@base: 1.5rem;→ 不能直接unit(@base, px),除非你确认 @base 是 px 单位 - 正确做法是约定基准:
@rem-base: 16px;,然后写@val: (1.5 * @rem-base) / 2; - 避免小数溢出:
height: round(42.666666666666664px, 1);→42.7px - 复合运算务必加括号:
(@gap * @scale) + 2px,否则@gap * @scale + 2px可能变成字符串拼接
漏掉一个括号,生成的 CSS 就可能无效,而构建过程不报错、DevTools 里也只显示“该声明被忽略”——你得盯着输出文件里每一处 / 看它有没有被计算。


















