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 会被忽略，但不会报错——这点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
