less变量在calc()中必须用@{...}插值语法，且变量需带单位；父容器须有明确高度，避免inline布局；移动端优先用px/vh/vw；less变量修改需重新编译，无法动态响应。
calc() 里用 Less 变量会失效？必须用插值
Less 编译时变量不会自动注入到 calc() 内部，直接写 calc(100vh - @header-height) 会导致编译出错或原样输出，浏览器无法解析。
正确做法是用插值语法 @{header-height} 把变量“吐”进字符串里：
body {
height: calc(100vh - @{header-height});
}
- 必须用
@{...}，不是@...，后者是普通变量引用，进不了字符串上下文 - 变量值建议带单位（如
@header-height: 60px），否则插值后可能变成calc(100vh - 60)，缺少单位导致无效 - 如果变量来自函数调用（如
lighten(@base, 10%)），不能直接插值——calc()只接受数值和单位，不支持颜色运算
自适应容器高度被父级限制为 0？检查祖先元素是否设了 height: 0 或 display: inline
calc() 计算结果再合理，也依赖父容器提供可用的参考尺寸。常见失效场景是：父级没设 height 或用了 display: inline / display: inline-block 且未触发 BFC。
- 确保至少一个直接父级有明确高度来源：比如
html, body { height: 100%; }，否则100vh在子元素里可能退化为内容高度 - 避免在
calc()容器上层用position: absolute且未设top/bottom，这会让高度脱离文档流计算逻辑 - Flex 容器中子项设
height: calc(...)通常有效，但若父级flex-direction: column且没设flex: 1，子项仍可能塌陷
移动端 Safari 对 calc() + rem/vw 混用渲染异常？优先用 px 或 vh/vw 原生单位
iOS 15–16 的某些 Safari 版本对 calc(100vh - 2rem) 这类混合单位计算存在 layout bug，滚动时高度跳变或初始为 0。
- 把
rem换成px（配合 Less 变量统一管理）最稳妥：@header-height: 48px→calc(100vh - @{header-height}) - 如需响应式，改用
vmax或媒体查询分段定义变量，而不是在calc()里塞min(48px, 3rem)—— 浏览器不支持函数嵌套 - 避免在
calc()中使用 CSS 自定义属性（var(--h)），Less 编译期无法处理，得靠 JS 注入，反而增加复杂度
Less 变量更新后 calc 高度没重算？因为 CSS 层面无动态响应机制
Less 是编译时预处理器，@header-height 改了，必须重新编译 CSS 文件；它不像 CSS 自定义属性那样能被 JS 动态修改并实时影响 calc()。
- 开发阶段用
watch模式监听 Less 文件变动，确保热更新生效 - 别指望在浏览器控制台改
document.documentElement.style.setProperty('--header-height', '56px')能影响 Less 编译出的calc()—— 两者不在同一层 - 真要运行时适配（比如主题切换改 header 高度），得放弃 Less 变量，改用 JS 计算后写内联样式：
el.style.height = `calc(100vh - ${headerHeight}px)`
最常被忽略的是：calc() 的括号内外空格不是可选的——calc(100vh-@{h}) 合法，但 calc(100vh-@{h}px) 会报错，因为减号紧贴单位会被误判为负单位。留空格，或者用插值包住整个带单位的值：@{header-height} 本身就得含单位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
