calc()中var()仅为字符串替换，非嵌套计算；--gap: calc(100% - 20px)会导致解析失败，应存带单位值如--gap: 20px，并写为calc(100% - var(--gap))。
calc() 里嵌套 var() 不是“嵌套计算”，而是字符串拼接
浏览器解析 calc() 时，var(--gap) 不会先执行、再代入；它只是把变量值原样插入表达式字符串中。如果 --gap: calc(100% - 20px)，那 var(--gap) 展开后就是 "calc(100% - 20px)"，整个表达式变成 calc(100vw - calc(100% - 20px)) —— 这不是合法语法，浏览器直接静默丢弃整条声明。
这不是“溢出”，是解析失败。DevTools 的 computed 面板里根本看不到该属性生效，检查器里也搜不到这条规则。
-
--gap: calc(100% - 20px)❌ 不要这么设变量值 -
--gap: 20px✅ 然后在 calc 中写calc(100% - var(--gap)) - 真要复用逻辑，用 CSS 自定义属性存无单位数值（如
--ratio: 0.8），再靠乘法组合：width: calc(100% * var(--ratio))
加减号两侧缺空格会让整个 calc() 失效
这是最常被忽略的硬性语法要求：+ 和 - 在 calc() 中是运算符，不是符号前缀。没空格就等于告诉浏览器“这是负单位”，而 -20px 是合法值，但 -100% 不是——百分比不能为负（除非作为 left 或 transform 的偏移量，但那是属性语义，不是 calc 类型系统允许的）。
-
width: calc(100% - var(--gap))✅ 正确（-前后都有空格） -
width: calc(100%-var(--gap))❌ 失效（-紧贴100%，浏览器当负号解析，后续无法匹配单位） -
height: calc(var(--h) + 10px)✅ 正确（+左右都有空格） -
height: calc(var(--h)+10px)❌ 失效（+左侧缺空格）
单位混用或上下文漂移导致结果为负或 0
比如 --gap: 50%，然后写 height: calc(100vh - var(--gap))。表面看都是“%”和“vh”，但 50% 的参照系是父容器高度，100vh 是视口高度——两者基准不同，浏览器不校准，只做字面减法：100vh - 50% 单位不兼容，整条声明被忽略。更隐蔽的是：若父容器 height: auto，那 50% 实际算出来是 0，最终变成 100vh - 0 = 100vh，看似正常，但一旦父容器有高度，结果立刻跳变。
- 避免在变量中存纯
%，尤其跨层级复用时 - 优先用视口单位替代：
--gap: 5vh比--gap: 5%更可控 - 涉及高度填充场景（如页眉+内容+页脚），用
min-height: calc(100vh - var(--header-h) - var(--footer-h))，且确保--header-h和--footer-h都带单位（如60px）
Sass/Less 编译阶段就可能破坏 calc() 结构
预处理器不是浏览器，它不会验证 calc() 语法。如果你写 width: calc(100% - $gap) 且 $gap: 50%，Sass 会直接输出 width: calc(100% - 50%) —— 这条 CSS 虽然能进浏览器，但属于“单位相同却上下文错配”，结果不可靠；更糟的是，某些版本 Sass 会进一步简化成 calc(50%)，彻底丢失原始意图。
- Sass 必须显式插值：
calc(100% - #{$gap})，且$gap定义时就要带单位（$gap: 20px） - Less 同理：
calc(~"100% - @{gap}")，不能省略波浪号和引号 - 禁止在
calc()内混用预处理器变量和 CSS 变量，例如calc(#{$header} - var(--footer))—— 编译后变成非法字符串
真正难调试的从来不是“为什么没生效”，而是“为什么有时候生效、有时候不生效”——那基本是 % 参照系漂移或预处理器提前计算导致的。盯住 DevTools 中 computed 值是否出现、单位是否一致、父容器尺寸是否已确定，比反复改变量值更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
