Less变量不能直接用于calc()，需用#{}插值；单位必须显式一致；避免运行时单位混用；iOS Safari的100vh问题可用dvh或JS方案缓解；含动态单位的calc()不可预计算。
calc() 里不能直接用 Less 变量
Less 编译时变量会被替换成字面值，但 calc() 是运行时由浏览器计算的 CSS 函数，它不理解 Less 语法。如果你写成 height: calc(100vh - @header-height);，Less 会原样输出（除非你用插值），但浏览器看到的是 calc(100vh - @header-height) —— 这是非法语法，会直接失效。
正确做法是用插值 ~"" 或 #{} 把变量“注入”进字符串：
@header-height: 60px;
.container {
height: calc(100vh - #{@header-height});
}
注意：#{} 会去掉引号并拼接；~"..." 是旧写法，功能类似，但可读性差，推荐用 #{}。
多个变量相减或带单位运算要小心单位混用
Less 不会在 calc() 内部做单位运算，它只负责字符串拼接。所以 #{@header-height + @footer-height} 是合法的（前提是两个变量单位一致），但 #{@header-height + 20} 会拼出 60px20 —— 缺少单位分隔，CSS 解析失败。
- 所有参与拼接的 Less 变量必须显式带单位（如
@header-height: 60px;） - 避免在
#{}外做加减：不要写calc(100vh - @{header-height} - 20px)，而应提前算好：@total-offset: calc(@header-height + @footer-height + 20px);，再用calc(100vh - #{@total-offset}) - 更稳妥的做法是把整个表达式写进一个变量：
@full-height: ~"calc(100vh - @{header-height} - @{footer-height})";，然后height: @{full-height};
配合 viewport 单位做响应式高度填充时，注意 iOS Safari 的 100vh bug
iOS Safari 中，地址栏收起/展开会导致 100vh 值跳变，造成容器高度闪烁或留白。这不是 Less 或 calc() 的问题，但你在用 calc(100vh - ...) 时会放大这个缺陷。
临时缓解方式（非根治）：
- 改用
dvh（dynamic viewport height）：height: calc(100dvh - #{@header-height});（支持 Chrome 105+、Safari 16.4+、Firefox 114+） - 降级方案：用 JS 动态设
--vh自定义属性，Less 中引用：height: calc(calc(var(--vh, 1vh) * 100) - #{@header-height}); - 不依赖视口单位：如果容器父级有明确高度，优先用
height: 100%;+overflow: hidden;组合
编译后 CSS 里 calc() 表达式是否冗余？要不要预计算？
Less 不会帮你把 calc(100vh - 60px) 简化成别的东西——它本就不该简化，因为 100vh 是动态的。但如果你写的是纯静态计算，比如 calc(20px + 30px)，Less 默认也不会合并（除非开启 math=always 模式，但不推荐）。
关键判断点：
- 只要表达式含视口单位（
vh/vmax）、百分比或 CSS 变量，就必须保留calc()，不能预计算 - 如果只是两个像素值相加且永远不变，不如直接写
50px，更清晰也省一次浏览器计算 - Less 的
unit()、round()等函数不能用在#{}插值里参与 calc 拼接，它们属于编译期函数，需在变量定义阶段用
最易被忽略的一点：#{} 插值不校验单位合法性，拼错单位（比如 @h: 60rem; 却用在减去 px 场景）会导致运行时无效，得靠人工或 CSS Lint 工具捕获。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
