如何利用CSS变量处理复杂的嵌套样式

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都用它，才叫真正解耦——否则只是把嵌套从选择器搬进了变量名里。