var()函数中变量名（第一参数）必须为静态字符串，不可拼接或计算；fallback（第二参数）可嵌套var()实现单层降级链，但不支持多层递归或动态生成变量名。
var() 函数里能嵌套引用另一个变量，但只允许在 fallback 位置（第二个参数）这么做；变量名本身（第一个参数）必须是静态字符串，不能拼接、不能计算。
var(--a) 中的 --a 必须是真实存在的变量名
浏览器解析 var(--a) 时，会直接查找名为 --a 的自定义属性。如果该变量未声明，或值无效（比如 --a: 123 没带单位但用在 font-size），就会退回到 fallback（如果有）。它不会尝试“拼出”变量名，也不支持 var(--${prefix}-color) 这类写法——${} 在 CSS 里纯属无效字符。
-
--primary: #3b82f6;和--accent: var(--primary);是合法的 -
--theme: "dark"; --bg: var(--${theme}-bg);❌ 直接报语法错误，根本不会被解析 -
--size: 16px; font-size: var(--size);✅ 正确，--size值本身带单位
fallback 里链式调用 var() 是最常用且安全的写法
当主变量可能未定义时，把另一个变量写在 fallback 位置，就能形成降级链。浏览器会递归展开，但仅限一层展开逻辑（即 var(--a, var(--b)) → 若 --a 无效，则取 --b 的值；若 --b 也无效，就用 --b 的 fallback，不会继续深挖）。
-
--bg-surface: var(--bg-base, #f9fafb);—— 主变量缺失时启用备选 -
--bg-card: var(--bg-surface, var(--bg-base, #ffffff));✅ 允许嵌套，但仅 fallback 区域 - 不要写
--bg-card: var(var(--bg-surface));❌ 第一个var()的参数必须是字符串，不能是函数调用
JavaScript 动态设置时，必须传 'var(--x)' 字符串，不能传 '--x'
用 document.documentElement.style.setProperty() 修改变量值时，如果目标是让新变量“指向”另一个变量，必须把 var(--target) 当作完整字符串传入。否则你只是存了个名字，不是引用。
- ✅ 正确：
document.documentElement.style.setProperty('--text-color', 'var(--primary-color)'); - ❌ 错误：
document.documentElement.style.setProperty('--text-color', '--primary-color');—— 这会让 CSS 解析成字面量--primary-color，不是颜色值 - ⚠️ 注意：JS 设置后，CSS 引用该变量的地方才会触发重新计算，不是立即生效的“绑定”
var() 自动识别，这条路走不通。 
