calc()中css变量失效的两大原因是空格缺失和单位不匹配：加减运算符两侧必须有空格，变量值必须带单位（如0px而非0）。
calc() 里用 CSS 变量失效，不是变量没定义，也不是浏览器不支持，而是两个硬性条件没满足：空格写错、单位类型不匹配。
calc 中加减运算符两侧必须有空格
哪怕你只漏了一个空格，整个 calc() 声明就会被浏览器跳过——它不会报错，但也不生效。这不是 bug，是 CSS 规范强制要求。
-
width: calc(100% - 20px);✅ 正确（-两边都有空格） -
width: calc(100%-20px);❌ 失效（-紧贴数值，整条规则被忽略） -
width: calc(100% + -20px);✅ 允许负值，但依然要空格
乘除运算符（*、/）虽不强制空格，但统一加上更安全，也避免和预处理器冲突。
CSS 变量必须带单位，0 也不能省略
CSS 变量在 calc() 中参与计算时，值必须自带单位。哪怕它是 0，写成 0 就会失效，必须是 0px、0rem 或 0%。
-
--gap: 20px;→width: calc(100% - var(--gap));✅ -
--gap: 20;→width: calc(100% - var(--gap) * 1px);❌ 不推荐，易出错 -
--offset: 0;→left: calc(var(--offset) + 10px);❌ 失效（0无单位，类型无法推断） -
--offset: 0px;→left: calc(var(--offset) + 10px);✅
预处理器（Sass/Less）中变量需插值包裹
Sass 和 Less 会提前解析 +、- 等符号，把 calc(100% - $gap) 当作自身算术表达式处理，结果可能是 calc(80%) 这种完全错误的值。
- Sass 写法：
width: calc(100% - #{$gap}); - Less 写法：
width: calc(~"100% - @{gap}"); - 直接写
var(--gap)没问题，那是运行时行为，不受预处理器干扰
注意：不要混用，比如 calc(100% - #{$gap} + var(--offset)) —— Sass 插值只作用于 $gap，后面 var() 是纯 CSS，但空格和单位仍要各自合规。
父容器尺寸未确定导致 100% 计算失败
calc(100% - 20px) 看似没问题，但如果父元素高度是 auto 或没设 height，那这个 100% 就没基准，最终计算结果为 auto 或无效。
- 常见于 Flex/Grid 子项、绝对定位元素、或未设高度的
body/html - 验证方式：在 DevTools 中看该元素的 computed height 是否为具体像素值
- 修复不是改
calc，而是确保父级有明确尺寸，例如：html, body { height: 100%; }
真正容易被忽略的是：这个“父级”可能隔了三四层，而你只盯着 calc 本身调格式——先查 computed 值，再逆向追高度来源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
