css 中 var() 是纯文本替换，非函数求值，运算必须用 calc() 且单位需严格匹配，变量定义、继承值、calc() 输入类型三层关系易导致静默失效。
因为 var(--x) 不是数值，只是字符串替换占位符——浏览器运行时才展开它，而 CSS 本身不提供对字符串做算术的能力。
var() 是纯文本替换，不是函数求值
var(--size) 在编译或解析阶段不做任何计算，只按原样替换成定义的值。比如 --size: 16px，那么 font-size: var(--size) * 1.2 展开后就是 font-size: 16px * 1.2，这不是合法 CSS 值，整条声明被浏览器静默丢弃（DevTools 里显示 strikethrough）。
- SCSS/Less 等预处理器也一样：它们无法在编译时读取运行时的
var()值，所以#{var(--x)}写法会报错，除非加引号写成"var(--x)" - JS 动态设置时，如果漏掉单位（如
el.style.setProperty('--gap', '20')），calc(var(--gap) + 10px)就变成calc(20 + 10px)，类型不匹配直接失效
所有运算必须交给 calc()，且格式极敏感
calc() 是唯一能在 CSS 运行时做数学的地方，但它有硬性规则：
- 操作数必须带单位（加减）或单位一致（乘除右侧只能是纯数字）：
calc(var(--gap) + 4px)✅，calc(var(--gap) + 4)❌（除非--gap是纯数字且上下文允许无单位） - 空格不能省：
calc(var(--a)+var(--b))❌，calc(var(--a) + var(--b))✅ - 不能嵌套函数：
rgb(calc(255 - 100), 128, 64)整条失效，必须拆到自定义属性层：--r: calc(var(--base-r) - 100)，再用rgb(var(--r), ...)
单位缺失是最大隐形坑
变量值是否带单位，决定了它能不能进 calc()：
-
--gap: 0→calc(var(--gap) + 10px)失效；必须写--gap: 0px -
--col: 4（纯数字）→ 可用于grid-template-columns: repeat(var(--col), 1fr)，但不能参与calc(var(--col) * 2px) - JS 设置时，
el.style.setProperty('--size', 16)和el.style.setProperty('--size', '16px')效果完全不同
真正卡住人的从来不是怎么写 calc()，而是搞不清「变量在哪定义」「当前元素实际继承到哪个值」「calc() 拿到的是带单位还是纯数字」这三层嵌套关系。一个 var(--size) 在 :root 是 16px，被 JS 改成 20（漏掉单位），整个布局就可能突然崩掉，而控制台连个 warning 都没有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
