CSS变量未生效主因是作用域错位或拼写差一字：变量名严格区分大小写、连字符数量及顺序，--allports与--alllports互不识别；var()仅在声明该变量的元素及其后代中有效，且受all: unset等重置属性中断继承链。
CSS变量没生效，90%不是语法错，而是作用域没对上或拼写差一个字符——var(--color)查不到值时，浏览器不会报错，只会静默回退到初始值或inherit，导致样式“消失”。
检查var()引用的变量名是否完全一致
CSS变量名严格区分大小写、连字符数量和拼写，--allports和--alllports是两个完全不同的变量，浏览器不会提示、也不会警告。
- 打开开发者工具 → Elements 面板 → 选中目标元素 → 在 Styles 面板里找那条用了
var(--xxx)的声明，看它是否被划掉（说明解析失败） - 点击该属性右侧的
var(--xxx)，浏览器会跳转到变量定义处；如果跳转失败，或跳转后发现定义名多/少一个字母、连字符位置不对，就是根源 - 特别注意数字与连字符组合：如
--spacing-xs≠--spacingxs，--z-index≠--zindex
确认变量定义在正确的选择器作用域内
--my-var只在它被声明的那个选择器及其后代中“可见”，var(--my-var)向上查找时，不会跨过未定义该变量的祖先节点去更上层找，也不会自动继承父元素的值。
- 如果你在
.card里写了--text-color: #333，那么只有.card > *能用var(--text-color)；body或兄弟.sidebar里写的var(--text-color)直接无效 - 避免把所有变量都塞进
:root——除非你真需要全局共享；否则应绑定到组件容器上，例如.user-profile { --avatar-size: 48px; } - 媒体查询中重定义变量（如
@media (prefers-color-scheme: dark) { .card { --text-color: #f0f0f0; } }）只影响该容器及后代，不影响其他同名容器
排查all: unset或all: initial意外切断继承链
all是一个强力重置属性，它会一次性清除包括自定义属性在内的所有可继承/不可继承属性，导致var()向上查找在中途“断掉”。
立即学习“前端免费学习笔记（深入）”；
- 检查目标元素或其任意祖先是否用了
all: unset、all: initial或all: revert - 尤其警惕第三方 UI 库或重置 CSS（如
normalize.css某些变体）中隐藏的all使用 - 临时删掉疑似重置规则，看
var()是否恢复生效——这是最快速的验证方式
真正难调试的从来不是“变量没定义”，而是“变量定义了，但不在查找路径上”。var()不继承值，只继承查找行为；它不广播，只局部可见。每次怀疑变量失效，先问自己：这个var(--x)语句所在的元素，它的任意一个祖先（含自身）是否真的定义过--x？定义的位置，是否恰好卡在它能“看到”的范围内？
