less 编译器会提前解析 calc() 中的运算符导致错误计算，必须用 ~"" 转义确保原样输出，变量需用 @{...} 插值，否则浏览器无法执行原生 calc()。
Less 编译器会把 calc() 里的 - 和 + 当作自身运算符提前计算，而不是留给浏览器运行时处理——这是根本原因。
Less 把 calc(100% - 50px) 编译成 50% 是怎么发生的
Less 在编译阶段就解析表达式：100% - 50px 被它识别为“百分比减像素”，而 Less 不支持跨单位运算，于是按内部规则强行换算（比如把 50px 按当前上下文折算成百分比），最终输出一个错误的静态值，如 50% 或 -50vh。
- 这种行为与 CSS 运行时的
calc()完全无关，浏览器根本没机会执行它 - DevTools 里看到的不是“计算结果错”，而是“原始声明被替换成别的东西”
- 哪怕你写的是
calc(100vh + 20px)，Less 也可能把它变成120vh或直接报错
~"..." 转义是唯一可靠解法
Less 的 ~"" 表示“这段字符串原样输出，不要解析”，它让整个 calc() 表达式跳过预处理器运算，直达 CSS 输出。
- 正确写法：
height: calc(~"100vh - 80px"); - 带变量时必须用插值：
@headerHeight: 64px; height: calc(~"100vh - @{headerHeight}"); - 不要写成
calc(~"100vh - " @headerHeight)—— 空格和拼接逻辑容易出错 - SCSS 对应写法是
calc(100vh - #{$headerHeight})，但 Less 没有等效的自动插值，~""是刚需
为什么加空格、补单位这些 CSS 规则在 Less 里反而不重要
在 Less 文件里，即使你写了 calc(100vh - 80px) 并确保了空格和单位，只要没加 ~""，Less 就已经把它吃掉了——后面那些语法细节根本没机会被浏览器看到。
-
calc(100vh-80px)（缺空格）在纯 CSS 中会静默失效；但在 Less 里，它可能先被编译成非法值，再被丢弃 -
calc(0 + 50vh)（0 缺单位）在 CSS 中无效；但在 Less 里，它甚至可能被算成50vh或0，完全不可控 - 真正要优先检查的，永远是：有没有
~""？变量有没有被@{...}正确包裹？
最容易被忽略的点：团队协作时，有人删掉 ~"" 只为“看着清爽”，结果整个布局塌掉——它不是可选优化，是 Less 环境下 calc() 的生存前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
