calc()中var(--x)报invalid value，90%因变量值缺单位；加减运算要求所有数值含明确量纲，如--x:20px✅而--x:20❌，--offset:0❌须写为0px✅；sass/less变量需定义时带单位；calc内加减号两侧必须空格；100%依赖父容器高度，否则结果为0。
calc()里var(--x)报invalid value，90%是变量值没带单位
浏览器解析calc()时，对类型极其严格：所有参与加减的数值（包括0）都必须明确量纲。如果--x: 20，那var(--x)展开就是字符串"20"，和100%相减就成了100% - 20——这不是“算错”，而是语法非法，整条声明被静默丢弃。
-
--gap: 20px✅ 后续calc(100% - var(--gap))能正常解析 -
--gap: 20❌ 即使只差一个px，calc()直接跳过该样式 -
--offset: 0❌ 比非零值更危险，0无单位=无类型，浏览器拒绝推断 -
--offset: 0px✅ 或0rem、0%都行，但不能省
预处理器中用$gap或@gap代入calc()，单位必须在定义时就带上
Sass/Less 的变量不是运行时读取的，它们在构建阶段就被替换。如果$gap: 20，那calc(100% - #{$gap})编译后就是calc(100% - 20)，依然失败。
- Sass 正确写法：
$gap: 20px;+width: calc(100% - #{$gap}); - Less 正确写法：
@gap: 20px;+width: calc(~"100% - @{gap}"); - 绝对不要写
calc(100% - $gap)或calc(100% - @gap)——未插值=字面量残留 - 乘法可“升格”单位：
font-size: calc(var(--base) * 1rem)，但前提是--base: 2（纯数字）
加减号两侧空格缺失，会让整个calc()消失在DevTools里
这不是警告，是静默丢弃。WebKit 内核（Safari、iOS WebView、多数安卓 WebView）尤其敏感：100%-20px会被当做一个非法 token 处理，连 computed 样式里都看不到这条规则。
-
calc(100% - 20px)✅ 减号前后各一个英文空格 -
calc(100%-20px)❌ 无空格，整条失效 -
calc(-50% + 10px)✅ 负号属于数值，+前后仍需空格 -
calc(100vh-30px)❌ 即使是vh单位，缺空格照样挂
父容器没设高度，100%就等于0，calc(100% - X)白写
100%不是魔法值，它依赖父级显式尺寸。如果父元素height是auto或压根没设，那calc(100% - 60px)实际算出的是0 - 60px = -60px，浏览器直接忽略该声明。
- 常见场景：Vue/React 组件中
.content { height: calc(100% - 80px); }，但它的父级.layout没设height: 100% - 验证方式：打开 DevTools → Elements → 查看该元素的
computed height是否为具体像素值；如果不是，往上逐级检查html→body→直接父容器 - 更健壮写法：
height: calc(100vh - 80px)，避开百分比依赖，但要确认是否符合布局意图
真正容易被忽略的，是改了 CSS 变量定义后，忘了同步检查所有引用它的 calc() 表达式——尤其是那些藏在深层组件、媒体查询或主题切换逻辑里的调用。空格、单位、插值，三者只要漏一个，整条就废。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
