CSS变量在calc()中不生效，根本原因是未遵守空格、单位、插值三重硬规则：加减号两侧必须有空格，所有数值（含0）必须带单位，Sass/Less变量须显式插值；任一缺失即被浏览器静默丢弃。
CSS变量在calc()里不生效，几乎从来不是浏览器兼容问题，而是三条硬规则中至少有一条没守牢：空格缺失、单位缺失、预处理器插值遗漏——漏一条，整条calc()就被浏览器静默丢弃，DevTools 里都看不到它。
加减号两侧有没有空格？
这是最常被忽略的语法铁律。+和-在calc()里是歧义符号，没空格时浏览器优先当“负号+单位”解析，比如100%-20px会被拆成100%和-20px，而-20px不是合法单位，整条声明直接跳过。
-
width: calc(100% - 20px)✅ 正确（-前后都有空格） -
left: calc(-50% + 10px)✅ 正确（负号属于数值，+前后仍需空格） -
height: calc(100vh-30px)❌ 失效（-紧贴数值，整条被忽略） -
margin: calc(100%+20px)❌ 同样失效（+左侧缺空格）
变量值本身带单位了吗？包括0
calc()是类型敏感的：它需要每个操作数明确是长度、角度还是频率。裸数字0或20没有量纲，浏览器无法推断该算成0px还是0%，于是整个表达式作废。
-
--gap: 20px→width: calc(100% - var(--gap))✅ -
--gap: 20→width: calc(100% - var(--gap))❌（var(--gap)展开为"20"，变成100% - 20，非法） -
--offset: 0px→left: calc(var(--offset) + 10px)✅ -
--offset: 0→left: calc(var(--offset) + 10px)❌（0无单位，类型无法推导）
Sass/Less 变量有没有显式插值？
预处理器在构建阶段就处理变量，不插值就等于把$gap或@gap原样塞进 CSS，浏览器根本认不出那是数值。更糟的是，Sass 可能真把它当算术式提前计算，输出calc(80%)这种非法值。
立即学习“前端免费学习笔记（深入）”；
- Sass 正确：
width: calc(100% - #{$gap})（且$gap: 20px） - Less 正确：
width: calc(~"100% - @{gap}") - 绝对不要写：
calc(100% - $gap)或calc(100% - @gap)——编译后仍是字面量 - 混用时别偷懒：
calc(100vh - #{$header} - #{$footer})❌，应先合并：$total: #{$header + $footer}，再用calc(100vh - #{$total})
父容器尺寸是否定义了？
100%不是魔法值，它依赖父元素的明确尺寸。如果父级height是auto或压根没设，那calc(100% - 60px)实际算出来是0 - 60px = -60px，浏览器直接忽略该声明。
- 常见场景：Vue/React 组件中
.content写height: calc(100vh - 80px)，但它的父级.layout没设height: 100% - 验证方式：在 DevTools 中看该元素的
computed height是否为具体像素值 - 修复不是改
calc，而是确保父级有明确尺寸，例如：html, body { height: 100%; }
真正容易被忽略的是三重叠加：空格漏了 + 0没带单位 + 预处理器又插了一脚——这三者同时存在时，你检查计算逻辑、查兼容性、看 DevTools 都找不到问题在哪。
