var(--a)显示invalid或计算为initial，说明CSS变量存在循环引用，此时规范要求静默丢弃整条声明，不报错不警告，取属性初始值；常见于--a:var(--b)且--b:var(--a)等双向依赖场景。
var(--a) 显示 invalid 或计算为 initial，说明循环已触发
浏览器解析 var(--a) 时，会尝试展开其值；如果 --a: var(--b) 且 --b: var(--a)，就会陷入无限递归。规范要求此时整条声明被**静默丢弃**，不报错、不警告，最终该属性取初始值（如 color: initial 导致文字变透明，background: initial 变成透明背景）。
循环引用不是“卡住”，而是被规范强制截断
这不是实现缺陷，是 CSS 自定义属性规范的明确行为：一旦检测到变量依赖图中存在环，整个 var() 调用被视为无效值，连 fallback 都不走。常见触发场景包括：
:root { --primary: var(--secondary); --secondary: var(--primary); }- 跨文件未对齐：A.css 定义
--theme: var(--base)，B.css 定义--base: var(--theme)，且两者都被@import或link加载 - 媒体查询内嵌套定义：
@media (prefers-color-scheme: dark) { :root { --text: var(--bg); } }，而--bg又在同个媒体查询里反向依赖--text
调试时别信 DevTools 的“已定义”提示
Elements 面板里看到 --primary 出现在 :root 下，不代表它可安全使用。真正要查的是：
- 右键目标元素 → “Inspect” → 在 Styles 面板悬停
var(--x)，看是否标红并提示invalid - 打开 Computed 面板，搜索对应 CSS 属性（如
color），确认最终值来源是不是initial或继承值 - 运行
getComputedStyle(document.documentElement).getPropertyValue('--primary')—— 若返回空字符串，大概率是循环或未定义，而非值本身为空
避免循环的关键是单向依赖 + 显式 fallback
设计变量层级时，必须确保依赖方向唯一。例如：
- 基础层（原子）：
:root { --color-blue-500: #2563eb; --color-gray-100: #f9fafb; } - 语义层（用途）：
:root { --color-primary: var(--color-blue-500); --color-bg: var(--color-gray-100); } - 组件层（局部覆盖）：
.card { --color-bg: var(--color-gray-50, var(--color-bg)); }
注意：var(--color-gray-50, var(--color-bg)) 是合法多级 fallback，但前提是 --color-gray-50 和 --color-bg 之间不能互引——否则第二层 var(--color-bg) 就会失效。
实际项目中最容易忽略的一点：循环可能藏在第三方 UI 库的 CSS 变量定义里，尤其当多个主题包叠加加载时。一旦出现大面积样式失真且无报错，优先检查所有 :root 块里的 var() 是否构成闭环。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
