Less严格数学模式默认关闭,启用需配置strictMath: true,它强制运算值必须有明确兼容单位,否则编译失败;strictUnits需同时开启才能杜绝单位混淆,建议两者共用。

Less 严格数学模式默认是关闭的,不启用就无法避免 10px + 5 这类歧义运算
Less 默认允许混合单位与数字直接运算(比如 10px + 5),它会自动把 5 当作 5px 处理。这看似方便,但极易掩盖单位误用——比如本意是 10px + 5em 却错写成 10px + 5,Less 不报错,结果却不符合预期。严格数学模式(strictMath: true)强制要求所有参与运算的值必须有明确、兼容的单位,否则编译直接失败。
这个配置不是写在 Less 文件里,而是传给编译器的选项:
- 命令行使用
lessc --strict-math=on input.less - Webpack 的
less-loader配置中加strictMath: true - Node.js API 调用时传入
{ strictMath: true }
启用后哪些运算会报错?典型错误场景有哪些
开启 strictMath: true 后,以下写法全部编译失败,错误信息类似 Operation on an invalid type 或 Mismatched units:
-
10px + 5→ 缺少单位,5不被隐式转为5px -
2rem * 1.5em→ 单位不可乘,rem和em属于不同基准,Less 拒绝推导 -
100% - 20px→ 百分比与像素单位不兼容,无法相减 -
round(10.7)→round()是函数,不是运算符,不受strictMath影响;但10.7 + 2就会因无单位被拦
注意:strictMath 只约束「二元运算符」(+、-、*、/、%),不影响函数调用、变量赋值或带单位的字面量拼接。
立即学习“前端免费学习笔记(深入)”;
如何安全地做跨单位计算?必须显式转换
严格模式下,想让 10px + 5 合法,就得明确告诉 Less 你想加什么单位:
- 写成
10px + 5px(最直接) - 用
unit()函数:比如@base: 10px; @offset: 5; @result: @base + unit(@offset, px); - 用
convert()强制转换单位(需目标单位支持):convert(1rem, px)(依赖根字体大小) - 百分比参与运算时,通常要先绑定到具体上下文,例如:
@width: 100%; @gutter: 20px; width: calc(@width - @gutter);—— 这里交给 CSS 运行时处理,避开 Less 编译期单位校验
别依赖 ~"10px + 5" 这种转义字符串:它跳过编译,但失去类型检查和变量代入能力,后期维护成本高。
Strict Math 和 Strict Units 是两回事,别混用或漏配
strictMath 控制「是否允许无单位数值参与运算」,而 strictUnits 控制「是否允许单位不匹配的运算」(如 10px + 1em)。两者独立开关:
- 只开
strictMath:仍允许10px + 1em(单位不同但都有单位) - 只开
strictUnits:仍允许10px + 5(因为5被隐式补了单位) - 两个都开:最严格,
10px + 5和10px + 1em全部报错
真实项目建议两者同时启用:strictMath: true + strictUnits: true,才能真正暴露单位使用问题。很多人只配了前者,结果依然踩进单位混淆的坑。
复杂点在于:有些旧版 Less 工具链(如某些 IDE 插件或 gulp-less 版本)不支持 strictUnits,得确认你用的 Less 编译器版本 ≥ 3.5.0。低于这个版本,strictUnits 会被忽略,但不会报错——这点最容易被忽略。


















