Less 中 calc() 必须用 ~"" 包裹才能原样输出，否则会被提前计算或报错；变量需带单位且插值写在引号外，如 height: ~"calc(100vh - @{gap})"；减号前后必须有空格，数值须带单位，否则浏览器静默丢弃。
Less 把 calc() 当成数学表达式提前算了
你写的 calc(100vh - 64px) 在 Less 编译阶段就被当作了算术运算，而不是留给浏览器执行的 CSS 函数。Less 不支持跨单位运算，所以它会强行把 64px 换算成当前上下文的 vh 值（比如按根字体大小折算），最终输出类似 height: calc(36vh) 或直接报错 Operation on an invalid type。
这不是浏览器不认，是浏览器根本没见到原始 calc()——它收到的是 Less “嚼碎”后吐出来的一个静态值。
- 所有参与运算的单位（
vh、px、%）在 Less 里不兼容，编译器不会校验，也不会警告 - 哪怕你写了
calc(100% + 20px)，Less 也可能输出calc(120%)，完全脱离预期 - DevTools 里看到的不是“计算错了”，而是“声明被替换了”——原始
calc()已经消失
没加 ~"" 是根本原因，其他都是白忙
~"" 是 Less 唯一能让一段字符串跳过编译、原样透传到 CSS 的语法。只要没加它，后面空格对不对、括号严不严谨、变量带不带单位，全都无效——因为那段代码压根没机会进浏览器。
常见错误写法：
-
height: calc(100vh - @header-height);→ 编译后还是calc(100vh - @header-height)，浏览器静默丢弃 -
height: ~"calc(100vh - @{header-height})";✅ 正确：变量在~""外展开，整个字符串透传 -
height: ~'calc(100vh - @{header-height})';❌ 单引号不触发转义，仍可能被解析
变量插值必须用 @{var}，且变量本身得带单位
~"" 内部是纯字符串，@{var} 不会自动替换；必须把插值写在引号外面，再拼进去。
正确做法：
-
@gap: 64px;（必须含单位） -
height: ~"calc(100vh - @{gap})";✅ -
@calc-str: "100% - @{gap}"; width: ~"calc(@{calc-str})";✅ 先展开再包裹 -
width: ~"calc(100vw - 2 * @{gutter} - 3 * @{item-width})";❌ 容易出错；应拆解为中间变量：@total-gap: (2 * @gutter);，再拼接
漏掉单位是最隐蔽的坑：@gap: 64; 看似一样，但拼进 calc() 后变成 calc(100vh - 64)，浏览器直接忽略整条声明。
低版本浏览器失效，往往是因为空格或单位缺失
即使 ~"" 加对了，输出的 CSS 仍可能被 IE11、Safari ≤15.3、旧版 Android WebView 静默丢弃——原因不是不支持 calc()，而是语法不合法。
-
calc(100%-64px)❌ 减号前后缺空格 → 整条规则被跳过 -
calc(100% -64px)❌ 减号后缺空格 → 同样失效 -
calc(0 + 50vh)❌0没单位 → 浏览器无法推断量纲，整条作废 - 确保输出结果是
calc(100vh - 64px)，且每个数值都带明确单位
真正容易被忽略的点：团队里有人觉得 ~"calc(...)"> 写着啰嗦，随手删掉，结果布局在多个环境同时崩——这不是风格问题，是 Less 下 calc() 能活下来的唯一前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
