CSS变量未生效主因是继承链断裂而非语法错误，需确认父元素是否定义变量、检查display:none等中断因素，并用DevTools Computed面板验证变量值。
CSS变量本身不解决嵌套结构，而是帮你把「变的部分」从嵌套里抽出来——嵌套负责层级关系，变量负责样式变异。直接往深层选择器里塞var(--x)却不管作用域，90%的失效都源于此。
为什么var(--color)在子元素里突然变成黑色？
这不是语法错，是继承链断了。CSS变量靠继承传递，不是全局查找。父元素没声明--color，子元素color: var(--color)就回退到initial（通常是黑色）。
- 用浏览器 DevTools 的「Computed」面板点开
color属性，看「Custom Properties」里有没有你想要的变量值 - 检查父容器是否真的设置了该变量，比如
.card { --color: #333; }，而不是只写了:root { --color: #333; } - 注意
display: none会切断继承链，display: contents不会
怎么让多层菜单每级颜色不同又不写死选择器？
别用.menu .submenu .submenu .item这种脆弱路径，改用data-level + 局部变量覆盖：
[data-level="1"] { --menu-fg: #1e40af; }
[data-level="2"] { --menu-fg: #3b82f6; }
[data-level="3"] { --menu-fg: #93c5fd; }
.menu__item { color: var(--menu-fg); }- HTML里给每级菜单加
data-level="2"，不用改DOM结构也能控制样式 - 避免用
:is(.menu__item--level-1, .menu__item--level-2)——IE不支持，且语义不如data-清晰 - 如果子菜单是
position: absolute移出父容器，得手动继承：style="--menu-fg: var(--menu-fg);"
calc()里用var(--gap)为啥布局塌了？
Safari 15.4之前、Android旧WebView里，calc(var(--gap) + 10px)会整条规则静默丢弃——DevTools显示Invalid property value，但控制台不报错。
立即学习“前端免费学习笔记（深入）”；
- 变量必须带单位：
--gap: 12px，不能写--gap: 12 - 复杂计算拆成两步：
--inner-width: calc(100% - 40px); width: calc(var(--inner-width) / 3); - PostCSS插件（如
postcss-custom-properties）默认不处理calc()里的var()，降级时得手动展开或换方案
最难的不是写var(--x)，而是想清楚这个--x到底该在哪一层定义、被谁读取、被谁覆盖。一个--spacing-unit在.card里设为12px，在.card__header里设为6px，所有padding都用它，才叫真正解耦——否则只是把嵌套从选择器搬进了变量名里。
