var()不是函数，仅能在css属性值位置引用自定义属性；不能用于函数参数、媒体查询或transition等非值上下文，且其展开依赖样式计算阶段而非解析阶段。
var() 本身不是函数，不能“作为参数”传给其他 CSS 函数——它只是在属性值位置引用自定义属性的语法。真正能和 CSS 函数协同工作的，是「变量声明 + var() 引用」这一整套上下文。
为什么 var(--x) 不能直接当函数参数用
var() 只能在属性值（value）处出现，不能出现在函数调用的参数列表里。比如这些写法全部非法：
-
background: linear-gradient(var(--dir), red, blue);→var()不支持插进函数参数位 -
@media (max-width: var(--breakpoint)) { ... }→ 媒体查询不解析var() -
transition: var(--prop) 0.3s;→transition不监听变量名变化
浏览器在解析 CSS 规则结构时，根本不会把 var(--x) 当作一个可求值的“表达式”，而是在样式计算阶段才展开它——且仅限于最终渲染属性的值位置。
var() 和 calc() 组合的实操要点
var() 可以嵌入 calc()，但必须满足三个硬性条件：
- 所有参与运算的值单位必须兼容：两个长度、两个数字，或一个数字 + 无单位变量（如
--scale: 1.2） - Safari 15.4 之前对加减顺序敏感：
calc(var(--gap) + 10px)会失败，得写成calc(10px + var(--gap)) -
calc()内部不支持嵌套var()：不能写calc(var(--a, var(--b))) - 带单位的 fallback 在旧版 Safari 中可能被忽略，稳妥做法是统一用像素或无单位数值 + 单位后缀，例如
calc(var(--size, 16) * 1px)
content 属性里用 var() 的坑
伪元素的 content 要求值是字符串，而 var() 返回的是原始值，不会自动加引号：
- 错误：
content: var(--tip);—— 若--tip值为help，渲染出纯文本；若为12px，直接无效 - 正确：
content: var(--tip, "default");，且确保变量定义时就带引号：--tip: "Click me"; - JS 设置时注意转义：
el.style.setProperty('--tip', JSON.stringify('Don\'t click'));
回退值（fallback）不是万能的，默认行为容易误判
var(--x, #000) 的第二个参数只在变量「未定义」时生效，空字符串 --x: "" 是已声明状态，不会触发 fallback：
- 检查是否真未定义：
getComputedStyle(el).getPropertyValue('--x')返回null才算未定义；返回""表示已声明但为空 - 回退值不参与作用域查找，也不支持
calc()或嵌套var()，但可以用前置变量间接实现，例如：var(--h1-size, var(--h1-size-fallback))，其中--h1-size-fallback已预先算好 - 构建时建议加 lint 规则，禁止对关键变量赋空字符串字面量，避免静默失效
最常被忽略的一点：CSS 变量不是 JS 变量，没有运行时求值能力，它的“动态性”完全依赖属性值上下文与浏览器样式计算流程——脱离这个链条，var() 就只是个无效占位符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
