calc()中单位混用或空格缺失会导致表达式被浏览器静默丢弃；var(--gap)返回字符串，加减运算需两侧空格且单位兼容，如100vh-50%因vh与%维度不同而失效。
直接在 calc() 里写 --gap: 50% 然后用 calc(100% - var(--gap))，看似合理，实际会失效——根本不是变量没生效，而是单位类型冲突导致整个表达式被浏览器静默丢弃。
var() 返回的是原始字符串，不是“带单位的数值”
CSS 自定义属性（--gap）存储的只是声明值的字面量。哪怕你写了 --gap: 50%，var(--gap) 拿到的也是字符串 "50%"，但它在 calc() 里参与运算时，仍需满足语法合法性：加减运算符两侧必须有空格、单位必须可参与对应维度计算。
-
calc(100% - var(--gap))实际展开为calc(100% - 50%)→ ✅ 合法，能算 -
calc(100vh - var(--gap))展开为calc(100vh - 50%)→ ❌ 单位不兼容（vh 和 % 属不同维度），整条规则被跳过 -
calc(1rem + var(--gap))展开为calc(1rem + 50%)→ ❌ 同样因单位混用失效
百分比单位在 calc 中不能跨维度混用
% 在 calc() 里不是万能通配单位：它只在与自身同类型上下文中有效。比如：
-
width或left中的%是相对于包含块宽度的 —— 此时calc(100% - 20px)合法 -
height中的%依赖父容器高度，且只能和%或vh类单位相加减（如calc(100vh - 20px)可行，但calc(100% - 20px)要求父高已知） -
font-size里的%相对于父元素字体大小，不能和px或rem直接运算
预处理器插值会破坏单位语义
如果你在 Sass 中写 $gap: 50%，然后用 calc(100% - #{$gap})，Sass 编译器可能把 50% 当作纯数值参与内部运算，输出成 calc(50%) 这种完全错误的结果。
- 正确做法是确保插值后仍保留单位语义：
calc(100% - #{$gap})仅当$gap是完整带单位的值（如50px、2rem）才安全 - 若变量本质是比例（如
$ratio: 0.5），应显式转换单位：calc(#{$ratio} * 100%)，而非硬套calc(100% - #{$ratio}%) - Less 中同理，
calc(~"100% - @{gap}")才能避免预处理器提前解析
空格缺失会让整个 calc 表达式被忽略
这是最隐蔽也最常踩的坑：哪怕单位都对，漏一个空格，浏览器就当它是非法 token，整条 CSS 规则静默失效，DevTools 里连 warning 都不报。
-
calc(100%-var(--gap))→ ❌ 失效（-紧贴var()） -
calc(100% -var(--gap))→ ❌ 失效（-后缺空格） -
calc(100% - var(--gap))→ ✅ 正确 - 乘除号虽不强制空格，但统一加上更稳妥：
calc(var(--multi) * 1rem)
真正要盯住的不是“为什么百分比不对”，而是“这个 calc 表达式有没有被浏览器真正解析”——先看 computed 值是否为空，再检查空格、单位匹配、预处理器干扰这三层，基本就能定位问题所在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
