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无单位，类型无法推导） - 乘法可“升格”单位：
font-size: calc(var(--base) * 1rem)✅（前提是--base: 2）
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% 失去基准
100%不是魔法值，它依赖父元素的明确尺寸。如果父级height是auto或压根没设，那calc(100% - 60px)实际算出来是0 - 60px = -60px，浏览器直接忽略该声明。
- 常见场景：Vue/React 组件中
.content写了height: calc(100% - 80px)，但父级.layout没设height: 100% - 验证方式：打开 DevTools，看该元素的 computed
height是否为具体像素值；如果不是，逆向查html → body → .layout - 更健壮的替代：用
calc(100vh - 80px)避开百分比依赖（但要确认布局意图是否允许） - 注意：这个“父级”可能隔了三四层，你盯着
calc调空格，却忘了往上翻三行查高度来源
真正容易被忽略的是三重叠加：空格少一个、0没写0px、Sass 又忘了#{} ——它们单独出现都致命，合在一起时 DevTools 连报错都不会给，只安静地让样式消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
