var() 不是函数而是自定义属性引用语法，必须用于属性值位置，依赖变量声明、引用及属性上下文三者协同；其求值在样式计算阶段，不支持属性名替换、嵌套或 transition 监听，且受浏览器兼容性与作用域规则严格约束。
var() 不是“CSS函数”意义上的函数，它只是读取自定义属性的唯一语法糖；真正协同工作的核心是：变量声明 + var() 引用 + 属性值上下文，三者缺一不可。
为什么 var() 不能直接写在属性名位置
var() 只能出现在属性值（value）处，不能替代属性名（property）。比如 color: var(--text-color); 合法，但 var(--text-color): #333; 或 var(--prop): value; 会直接报错 Invalid property name。
- CSS 变量本质是“自定义属性”，不是 JS 变量，不参与样式解析前的宏展开
-
var()的求值发生在样式计算阶段，且仅作用于最终渲染属性（如background-color、font-size），而非 CSS 规则结构本身 - 浏览器不会把
var(--prop)解析成一个属性名，所以无法动态切换属性类型（比如从margin切到padding）
var() 和 calc() 组合时单位与顺序很关键
var() 可以嵌入 calc()，但 Safari 15.4 之前对加减运算中单位位置敏感：写成 calc(var(--gap) + 10px) 会失败，必须调换顺序为 calc(10px + var(--gap))。
- 所有参与
calc()运算的值必须类型兼容：两个长度单位、两个数字、或数字与无单位变量（如--scale: 1.2） - 带单位的 fallback 在旧版 Safari 中可能被忽略：
var(--size, 1rem)不稳定，建议统一用像素或无单位数值 + 单位后缀（如calc(var(--size, 16) * 1px)） -
var()在calc()内部不支持嵌套，即不能calc(var(--a, var(--b)))
伪元素里用 var() 要小心 content 类型匹配
在 ::before 或 ::after 的 content 属性中使用 var() 是可行的，但变量值必须是字符串，且需手动加引号包裹 —— 浏览器不会自动补。
- 错误写法：
content: var(--tip);（若--tip值为help，实际渲染为help；若为12px，则非法） - 正确写法：
content: var(--tip, "default");，且确保--tip定义时带引号：--tip: "Click me"; - 若变量来自 JS 设置，注意 JSON 字符串转义：
el.style.setProperty('--tip', JSON.stringify('Don\'t click'));
transition 无法监听 var() 变化，必须映射到真实属性
transition: --primary-color 0.3s; 完全无效 —— transition 只响应最终 CSS 属性（如 background-color）的变化，不感知变量名变更。
- 正确做法：让变量绑定到可动画属性上，例如
background-color: var(--bg-color); transition: background-color 0.3s; - JS 动态改变量后，如果页面没重排，动画可能卡住；可强制触发一次重排：
getComputedStyle(el).opacity; - 不要在
@keyframes中用var()控制关键帧数值，动画过程不会响应变量更新
最易被忽略的一点：变量作用域和继承是隐式发生的，但 var() 查找路径严格遵循 CSS 层叠规则 —— 父元素定义的变量，子元素能继承，但若中间某层选择器重定义了同名变量，就会覆盖，而不是合并。调试时别只看 :root，得 inspect 元素 computed 样式里的 actual value 来确认到底读到了哪个作用域的值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
