<p>Less中calc()被错误解析时，必须用~"calc(100% - 20px)"转义，使编译器原样输出而非提前计算；单引号无效，~须紧贴双引号，支持变量插值如@{gap}，但不可嵌套转义。</p>
Less 中 calc() 被错误解析为数学表达式
Less 默认会把 calc(100% - 20px) 当作算术运算处理，直接计算成一个无效值（比如 80%），而不是原样输出给 CSS。这在旧版浏览器里尤其致命——因为它们需要原生 calc()，但你却给了个静态值。
根本原因：Less 的插值和运算优先级高于 CSS 函数字面量，calc 在这里不是“被忽略的字符串”，而是“待求值的表达式”。
- 不要写
width: calc(100% - 20px);—— Less 会尝试计算 - 必须用转义让 Less 停止解析：写成
width: ~"calc(100% - 20px)"; -
~""是 Less 的“字符串转义”语法，表示“原样输出引号内内容，不编译、不计算”
为什么不用 unit() 或 percentage() 替代
有人试过把 100% 提前转成 unit，再减去 20px，结果是 NaN 或编译报错——因为 Less 不支持跨单位运算（% 和 px 不能直接加减）。
更关键的是：即使能绕过编译错误，生成的也不是 calc()，而是静态值，失去响应能力。
-
unit(100%, '%') - 20px→ 编译失败或无意义结果 -
calc()的语义是“浏览器运行时计算”，不可被预计算替代 - 旧版浏览器（如 IE10+、Android 4.4 WebView）依赖原生
calc()，必须保留函数结构
~"calc(...)": 的兼容性与书写细节
这个写法从 Less 1.4 开始支持，覆盖所有仍在维护的 Less 版本（包括 2.x / 3.x / 4.x）。但要注意几个易错点：
- 引号必须是双引号
"，单引号'不生效 -
~必须紧贴引号，不能有空格：~ "calc(...)"是错的 - 括号内可以含变量，但变量需提前定义且类型安全：
@gap: 20px; width: ~"calc(100% - @{gap})"; - 避免嵌套转义：
~"~'calc(...)'"会多出一层引号，导致 CSS 无效
PostCSS 或构建流程中是否还要额外处理
不需要。转义后的 ~"calc(...)" 编译结果就是纯 CSS 的 calc(...)，不依赖任何运行时 polyfill。
但如果你同时用了 Autoprefixer，请确认它没误删 calc()——旧版配置可能因识别不到标准语法而剔除整条声明。检查输出 CSS 是否包含原始 calc 字符串即可验证。
- Autoprefixer 9+ 默认保留
calc()，无需特殊配置 - 若用 Webpack + less-loader，确保
less版本 ≥ 3.9（修复过某些转义截断 bug） - 真正容易被忽略的是：媒体查询里也得同样转义，
@media (min-width: ~"calc(320px + 1em)")同样适用
