less 4.0 中除法必须显式触发,仅支持 (100px / 4) 或 100px ./ 4 两种写法;math 配置(如 "always")已移除,strictmath 不影响除法行为。

Less 4.0 没有“兼容标准 CSS 语法”的数学配置选项。除法行为是硬编码的,不是靠配置能绕开的 —— 你不能让 100px / 4 自动计算,无论怎么配 math 或 strictMath。
为什么 math: "always" 在 Less 4.0 中完全无效
Less 4.0 已彻底移除字符串型 math 配置(如 "always"、"parens")。所有这类写法都会被静默忽略,等价于没写。
底层编译器只认整数 math: 1 或 math: 2,且它们仅影响构建工具层对旧代码的兼容提示,**不改变除法是否执行**:
• math: 1:允许无括号除法(如 100px / 4)在部分构建工具中“假装生效”,但实际仍可能输出非法 CSS
• math: 2:严格模式(默认),要求除法必须显式触发——否则 / 就是纯字符
真正起作用的只有两种写法:(...) 和 ./
所有涉及除法的地方,必须手动选择其中一种,没有例外:
• (100px / 4) —— 推荐首选:语义清晰、支持嵌套单位(如 (2rem / 2))、与 calc() 风格一致
• 100px ./ 4 —— Less 特有语法,./ 前后必须各有一个空格;100px./4 或 100px . / 4 都会解析失败
反例:
• (100 / 4)px → 报 Operation on an invalid type
• 100 / 4px → 单位位置错误,结果不可预期
• line-height: 20px / 16px → 输出原样,浏览器静默丢弃该声明
strictMath 和除法毫无关系
strictMath: true 只控制无单位数值能否参与运算(如 10px + 5 是否报错),它对 100px / 4 完全不起作用 —— 后者根本不会进入运算阶段。
常见误判:
• 认为开启 strictMath 就能“强制计算除法” → 实际毫无影响
• 在 VS Code Easy Less 插件里看到“编译成功”,就以为 width: 100px / 4 生效了 → 插件可能用旧引擎,或输出了非法 CSS
• 构建日志没报错,就认定样式正常 → DevTools 里能看到该声明被标灰、失效
乘、加、减不用括号,但单位混合仍会出错
加减乘本身不要求括号,但单位兼容性检查照常生效:
• ✅ margin: 10px * 2 → 输出 margin: 20px
• ❌ height: 10px + 2em → 报错:单位不可加
• ❌ font-size: 14px / 1.5 → 错误写法(这是 CSS 行高简写语法,不是 Less 运算),应写成 font-size: (14px / 1.5) 或直接用 font: 14px/1.5 sans-serif
混合运算如 @a + @b / 2 即使 math: 1 也建议加括号:@a + (@b / 2),避免优先级歧义
漏掉一个括号,CSS 就少一行有效规则,而构建过程不报错、控制台无提示 —— 你得手动检查生成的 CSS 文件,或用工具扫描含 / 的声明行,确认是否被原样输出。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











