less会误解析calc()括号因其默认将calc(100% - 20px)当作自身数学表达式提前计算，导致报错或错误输出；应使用双/单引号包裹或~"calc(...)"插值禁用解析。
Less 会把 calc() 里的括号当成自身语法的一部分，导致编译失败或生成错误 CSS —— 这不是你写错了，是 Less 解析器在尝试“帮”你做数学运算时抢了 calc() 的活。
为什么 Less 会误解析 calc() 里的括号？
Less 默认把形如 calc(100% - 20px) 当作它自己的数学表达式（比如 100% - 20px），试图提前计算。但 CSS 的 calc() 必须原样输出到最终 CSS 中，不能被 Less 展开或求值。
常见错误现象包括：
- 编译报错：
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，而这不是合法的 Less 运算（单位混合），必然失败。
正确做法只有两种：
- 用插值拼接：
width: ~"calc(100% - @{gap})"; - 或预拼字符串：
@calc-width: ~"calc(100% - 20px)"; width: @calc-width; - 绝对不要依赖 Less 自动识别
calc()—— 它没有这个能力，也不会有 - PostCSS 或 Webpack 的 CSS loader 不会修复这个问题，这是 Less 编译期行为，必须在 .less 文件里解决
真正容易被忽略的是：哪怕你只在一行里写了 calc()，只要没加引号或 ~""，Less 就可能在某个嵌套层级或 mixin 展开时悄悄把它拆开 —— 错误不一定立刻出现，但上线后布局就偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
