less 编译期会错误解析 calc() 中的算术表达式，导致单位不兼容和结果错误；必须用 ~"..." 转义字符串绕过编译，并确保变量带单位、空格规范，否则浏览器将静默忽略声明。
Less 编译期把 calc() 当成算术表达式执行了
这不是浏览器问题，是 Less 在编译阶段就“抢跑”了：calc(100% - 50px) 被它当成两个操作数做减法，而单位不兼容（% 和 px 无法换算），最终结果被强制转成纯数字或丢弃单位，常见输出是 50% 或 -150% 这类明显错值。
根本原因在于 Less 的运算规则：它会对所有带 +、-、*、/ 的表达式尝试单位归一和计算，哪怕你本意只是让浏览器在运行时执行 calc。
-
calc(100% - 50px)→ Less 尝试把100%换算成 px（失败）→ 降级处理 → 输出50% -
calc(100vh - 80px)→ Less 把100vh当作 100，减去 80 → 得到20vh（网友实测案例） - 只要表达式里含减号且左右有可解析的数值，Less 就会介入，不管外面包没包
calc()
~"..." 是绕过 Less 编译的唯一可靠写法
必须用转义字符串告诉 Less：“别动这串东西，原样吐出去”。否则变量插值、空格保留、单位完整性全都会崩。
- 固定值写法：
height: calc(~"100vh - 80px");（注意引号内空格不能少） - 变量写法：
@gap: 20px;→width: calc(~"100% - @{gap}"); - 别用
calc(100% - @{gap})：新版 Less 虽支持，但部分构建工具（如旧版 less-loader）仍会误解析 - 别漏单位：
@gap: 20;（无单位）→calc(~"100% - @{gap}px")才安全，否则浏览器收到100% - 20直接丢弃整条声明
空格和单位是 calc() 生效的硬门槛
就算过了 Less 编译，浏览器端也会因语法不合规直接忽略整个 calc() 声明。这不是警告，是静默失效。
- 减号、加号前后必须各一个空格：
calc(100% - 20px)✅，calc(100%-20px)❌（被当非法单位名） - 负值写法：
calc(-50% + 10px)✅，-属于数值本身，但+前后仍要空格 - Sass/Less 拼接时容易自动 trim 空格，所以必须用插值包裹：
calc(100% - #{$gap})（Sass）、calc(~"100% - @{gap}")（Less） - 变量值若没带单位（如
--gap: 20），传进calc()就变成100% - 20，浏览器无法推导结果单位，整条声明作废
Less 变量参与 calc() 时单位必须显式携带
Less 变量本身不带运行时语义，它只是字符串替换。你定义 @gap: 20，它不会自动补 px；你写 @gap: 20px，它才真能参与拼接。
- 错误示范：
@gap: 20; width: calc(~"100% - @{gap}px");→ 编译后是calc(100% - 20px)，看似 OK，但变量语义混乱，易被他人误解 - 推荐写法：
@gap: 20px;→calc(~"100% - @{gap}")，单位随变量走，后续复用更稳 - 如果变量用于多处（比如同时喂给
padding和calc），统一定义带单位的值比到处拼px更可靠 - 千万别混用：
@gap: 20;用于margin: @{gap}px;，又试图在calc里用@{gap}—— 这等于把单位管理责任甩给每个使用点，出错概率翻倍
真正卡住人的从来不是单个 calc 写不对，而是变量定义没单位、拼接时空格被删、不同模块用不同方式补单位——这些细节在编译后全变成不可见的 CSS 字符串，查起来得一行行 inspect computed style 对比。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
