你是否也曾遇到过这样的困境：明明按照 CSS 规范写了 calc(100% - 20px)，但 Less 编译时却报错 Variable @20px is undefined？其实问题并不在你，而是 Less 解析器在试图“帮助”进行数学运算时，抢占了 calc() 的解析权。
问题的本质很单纯：Less 默认会将 calc() 内的括号视为自身语法的一部分，进而导致编译失败或生成错误的 CSS。那么，该如何解决这一 Less 与 calc 的解析冲突呢？
为什么 Less 会误解析 calc() 里的括号？
当 Less 看到类似 calc(100% - 20px) 的表达式时，它会本能地尝试将其作为自己的数学表达式提前计算——例如把 100% - 20px 当作一次减法运算。但 CSS 的 calc() 要求原封不动地输出到最终样式表，不能被 Less 展开或求值，这就导致了 Less 编译 calc 报错的问题。
常见的三种错误现象包括：
- 编译报错：
Variable @20px is undefined（Less 错误地将- 20px当成了变量引用） - 输出结果变为
calc(80%)（Less 提前做了不必要的计算） - 括号被剥离，变成
calc(100% - 20px（丢失了右括号）
用引号包裹整个 calc() 表达式
这是最直接且兼容性最佳的方法：向 Less 明确传达“别动它，把它当作字符串处理”。只要 Less 遇到带引号的值，就不会再解析内部结构。
实操建议：
- 推荐写法：
width: "calc(100% - 20px)"; - 注意：引号必须使用双引号或单引号，且包裹整个
calc(...)，不能只包裹参数 - 输出结果为干净的
width: calc(100% - 20px);，没有多余空格或转义字符 - 此方法适用于所有 Less 版本（包括旧版 2.x 和新版 4.x）
用插值 ~"" 显式禁用解析
Less 还提供了一种“转义字符串”语法 ~"..."，相比普通引号，它能更明确地指示“原样输出”，尤其适合需要嵌入变量的场景。
实操建议：
- 基础用法：
width: ~"calc(100% - 20px)"; - 若需引入变量（推荐做法）：
@gap: 20px; width: ~"calc(100% - @{gap})"; - 避免写成
~"calc(100% - " @gap ")"——字符串拼接错误会导致语法问题 - 如果使用了
~""仍然报错，请检查是否漏掉了波浪线或引号不匹配
避免在 calc() 内部直接拼接 Less 变量
许多人倾向于这样写：width: calc(100% - @gap);——看似简洁，但 Less 会率先尝试计算 100% - @gap，而由于单位混合不合法，必然导致失败。
唯一正确的处理方式有两种：
- 使用插值拼接：
width: ~"calc(100% - @{gap})"; - 或预定义转义字符串：
@calc-width: ~"calc(100% - 20px)"; width: @calc-width; - 切记不可依赖 Less 自动识别
calc()——它并不具备此功能，未来也不会支持 - 需要特别说明：PostCSS 或 Webpack 的 CSS loader 无法解决该问题，这是 Less 编译期的行为，必须在 .less 源文件中处理
一个常被忽略的陷阱是：即便你只在某一行使用了 calc()，只要没有添加引号或 ~""，Less 就可能在某些嵌套层级或 mixin 展开时悄悄将其拆解。错误不一定立刻暴露，但上线后布局就会出现偏移。就是这么简单，也这么让人头疼。
