less 4.x移除的是对css中/的模糊解析逻辑,而非不符合规范的运算逻辑;它硬编码规则:仅(…)或./才触发计算,未包裹的/一律字面输出,calc()需用~"…"转义才能保留。

Less 4.x 并没有“移除不符合 CSS 规范的运算逻辑”——它移除的是对 CSS 字面量中 / 的模糊解析逻辑,目的是让编译行为可预测、可验证,而不是为了贴合 CSS 规范。
浏览器本就不支持在任意属性里用 / 做数学运算。CSS 里 / 只是分隔符(如 font: 16px/1.5 sans-serif),不是运算符。旧版 Less(3.x)试图“猜”哪些 / 是想算数、哪些是 CSS 简写分隔符,结果常出错:比如把 width: 100px / 4; 当成计算,却把 line-height: 20px / 16px; 当成分隔——这种启发式判断既不可靠,也无法静态验证。
Less 4.x 改为硬编码规则:所有未包裹的 / 都当字面量输出,仅 (...) 或 ./ 显式标记才触发计算。这不是妥协于 CSS 规范,而是放弃“智能猜测”,把控制权交还给开发者。
你必须显式写 (100px / 4) 或 100px ./ 4,否则就等于告诉编译器:“这里不要算,原样留着”。这个决定让生成的 CSS 更易审计、更少静默失效——但代价是你得改写法,不能依赖配置兜底。
calc() 同理:calc(100% - 20px) 被提前计算,不是因为违反规范,而是 Less 把它当表达式吃了;要保留它,就得用 ~"calc(100% - 20px)" 明确逃逸。
真正容易被忽略的点:这个规则不走配置层,不随构建工具变化,也不报错。你漏掉一个括号,CSS 就无效,而 DevTools 里只显示灰色声明,控制台一片安静。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











