less 4.x中strictmath和math配置对除法及calc()无效,因编译器硬编码处理:/仅在括号内或用./时计算,calc()需用~"calc(...)"转义才能原样输出。

Less 4.x 没有“禁用数学运算”的全局开关,所谓“保持原样输出”必须靠显式转义或语法规避——因为编译器对 / 和 calc() 的处理是硬编码行为,不响应配置变更。
为什么 strictMath: true 或 math: 1 都不管用
strictMath 只控制无单位数值能否参与加减乘(如 10px + 5),对除法 / 完全无效;math: 1 在 4.x 中已被降级为兼容提示,不改变实际解析逻辑。无论怎么配,width: 100px / 4; 依然输出原样,浏览器静默丢弃。
保留 calc() 原样输出的唯一可靠方式
必须用波浪号转义:~"calc(100% - 20px)"。这是 Less 唯一被广泛验证的逃逸机制:
-
~"calc(${@gap} + 20px)"支持变量插值,但整个字符串仍原样输出 - 引号必须是英文双引号或单引号,
~ ""(中间有空格)会失效 - 不要尝试用反斜杠转义括号或减号,如
calc\(100\% - 20px\),Less 不识别
让除法不被提前计算的两种写法
想让 / 真正作为 CSS 运算符交给浏览器执行,就得阻止 Less 解析它:
- 写成
(100% / 12)→ Less 会计算出8.33333333%,不是你想要的动态 calc - 正确做法是绕过 Less 计算:用
~"calc(100% / 12)" - 如果只是想避免除法被当字面量输出(比如要生成静态值),那就必须加括号或用
./:(100px / 4)或100px ./ 4
最容易被忽略的是:所有未包裹的 / 都不会报错,只沉默失效;而 calc() 被吃掉后也不会警告——你得检查生成的 CSS 文件里是否真出现了 calc(...) 字符串,而不是靠构建日志判断。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











