<p>Less 4.x 中 calc() 被提前计算是因 strictMath: false 默认启用，需用 ~"" 转义强制原样输出，如 width: calc(~"100% - 50px")；空格必须合规，且转义不解决旧浏览器兼容问题，需 CSS 层叠 fallback。</p>
Less 4.x 中 calc 被提前计算，根本不是 CSS 层失效
Less 4.x 默认开启 strictMath: false，这意味着它会把 calc(100% - 50px) 当作自己的算术表达式解析：先尝试单位换算，再执行减法，最后输出一个静态值（比如 calc(50%)）。这不是浏览器不支持 calc()，而是 Less 在编译阶段就把它“吃掉”了。
- 即使你写了合法的 CSS
calc()表达式，只要没逃过 Less 解析，最终生成的 CSS 就不含动态计算逻辑 -
strictMath: true可禁用该行为，但会同时禁用所有 Less 内置运算（如@a: 10px * 2），实际项目中很少启用 - 所以真正可行的路径不是改配置，而是明确告诉 Less：“这段别碰，原样吐出去”
必须用 ~"" 转义字符串包裹整个表达式
Less 的波浪号 ~"" 是唯一被广泛验证有效的转义方式，它强制将内容作为纯字符串输出，绕过所有运算和单位转换。
- ✅ 正确：
width: calc(~"100% - 50px");→ 编译后仍是width: calc(100% - 50px); - ✅ 正确：
height: calc(~"96vh - #{@header-height}");→ 插值部分由 Less 处理，外层字符串保留 - ❌ 错误：
width: calc(100% - 50px);→ Less 计算为calc(50%)，失去响应性 - ❌ 错误：
width: calc(~"100%-" 50px);→ 语法错误，~""必须包裹完整表达式，不能拆开
不要混淆空格规范和转义逻辑
CSS 层面对 calc() 的空格要求（如 +、- 两侧必须有空格）和 Less 转义是两件事。空格不对会导致浏览器忽略该声明；不加 ~"" 会导致 Less 提前计算——两者叠加会让问题更难排查。
- 空格是 CSS 运行时要求：哪怕用了
~""，也得写成~"100% - 50px"，不能是~"100%-50px" - Less 不会校验你字符串里的空格是否合规，它只负责原样输出；最终能否生效，取决于浏览器是否接受这个字符串
- 常见误判：看到 DevTools 里出现了
calc(100% - 50px)就以为没问题，其实可能只是空格对了，但单位混用（如% + rem）在旧安卓上仍会整条失效
复杂表达式建议提取变量再拼接，别硬塞进 ~""
当需要动态插入多个值（比如从 mixin 参数或函数返回）时，直接在 ~"" 里写插值容易出错，且无法做类型检查或单位归一化。
- 推荐写法：
@offset: 50px; width: calc(~"100% - @{offset}"); - 避免写法：
width: calc(~"100% - @{@offset}");—— 双重@会报错 - 更安全的封装（mixin 示例）：
.calc-width(@base, @sub) { width: calc(~"@{base} - @{sub}"); }调用：.calc-width(100%, 50px); - 注意：
@{}插值只支持简单变量或字符串，不支持函数调用或嵌套表达式，比如@{unit(@val)}会失败
真正容易被忽略的是：转义只解决 Less 层劫持，不解决浏览器兼容性。Android 4.4 WebView 或微信 6.5.22 之前版本，即使 calc(~"100% - 2rem") 编译正确，运行时仍可能被整条丢弃——这时 fallback 必须靠 CSS 层叠顺序（固定值在前，calc() 在后）来兜底。
