var()的fallback参数中嵌套var()是唯一规范支持的链式回退方式，如--bg-card: var(--bg-surface, var(--bg-base, #ffffff))；变量名位置（第一参数）必须为静态字符串，不可拼接或计算，且被引用变量须先声明。
var() 的 fallback 参数里嵌套 var() 是唯一可靠方式，其他写法基本都会失效。
var() 第二个参数里才能嵌套另一个 var()
浏览器只允许在 var() 的默认值（即第二个参数）中再写一个 var()。这是唯一被规范支持的“链式”写法。
-
--bg-card: var(--bg-surface, var(--bg-base, #ffffff));✅ 有效：若--bg-surface无效，就取--bg-base；若它也无效，最终用#ffffff -
--bg-card: var(var(--bg-surface));❌ 语法错误：var()第一个参数必须是字符串字面量，不能是函数调用 -
--bg-card: var(--bg-surface, --bg-base);❌ 无效回退：--bg-base被当作文本字面量，不是变量引用，结果是字面字符串--bg-base，而非它的值
声明顺序决定能否正确解析
CSS 变量按从上到下顺序解析，被引用的变量必须先声明，否则初始值为 invalid，后续无法修复。
-
:root { --base: #2563eb; --theme: var(--base); }✅--theme最终是#2563eb -
:root { --theme: var(--base); --base: #2563eb; }❌--theme初始无效，即使后面定义了--base，也不会重新计算 - 作用域内重定义变量（如在
.dark中改--base），不会触发已引用它的变量（如--theme）自动更新 —— CSS 变量没有响应式绑定
JavaScript 动态设置时容易漏掉引号
用 JS 设置变量值时，如果想让新变量“指向”另一个变量，必须把整个 var(--x) 当作字符串传入，而不是只传变量名。
-
document.documentElement.style.setProperty('--text-color', 'var(--primary-color)');✅ 正确：CSS 解析器会识别并求值 -
document.documentElement.style.setProperty('--text-color', '--primary-color');❌ 错误：CSS 把它当普通文本，渲染结果就是字面量--primary-color - 注意：JS 设置后，相关样式不会立即重绘，要等下一次样式计算周期才生效；且修改的是当前作用域的变量值，不影响其他作用域中的同名变量
链式 fallback 实际只展开一层，但浏览器会递归解析
规范说 fallback 展开仅限一层，但实践中浏览器会对 fallback 中的 var() 再次解析 —— 这是实现多级回退的基础，但别指望它有逻辑判断能力。
-
--a: var(--b); --b: var(--c); --c: red;→var(--a)最终得red，靠的是递归解析，不是“多层嵌套” - 不存在运行时条件分支：
var(--mode) == 'dark' ? --dark-bg : --light-bg这种写法完全不支持 - 所有中间变量名都得静态写出，
var(--${prefix}-color)或拼接字符串生成变量名，在 CSS 里根本不会被解析
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
