SCSS嵌套不生成CSS继承链，仅是预处理语法；自定义属性--color必须显式声明在真实父容器选择器上（如.card { --color: red; }），否则子元素var(--color)将无法继承，只能回退到:root或失效。
SCSS嵌套本身不生成CSS继承链，它只是预处理语法
SCSS的嵌套写法（比如 .card { .header { ... } }）最终编译出来的是一条独立选择器规则，和父元素是否在DOM中真实存在、有没有声明--color完全无关。浏览器只认编译后的CSS规则里有没有在某个祖先节点上显式设置了自定义属性——而SCSS嵌套不会自动帮你把变量“提上去”声明。
常见错误现象：你在.card .header里写了--text-color: blue，以为.card__title能继承；但实际编译后，这个变量只挂在.card .header匹配的元素上，.card__title根本不是它的后代，自然拿不到。
- 变量必须声明在**真实包裹容器的选择器**上，比如
.card { --text-color: blue; }，而不是.card > .header或.card__body - SCSS中用
@include混入变量声明时，确保它被注入到最外层容器，而非嵌套块内部 - 别依赖
&__item { --x: val; }这种写法让子项继承——它只对&__item自身生效
父选择器未显式声明变量，子元素var()就查不到
浏览器查找var(--color)时，会从当前元素开始，逐层向上找**最近一个显式设置了--color的祖先元素**。如果SCSS嵌套结构没在父容器上写变量声明，哪怕逻辑上“它该管着下面”，编译结果里也没有对应CSS规则，继承链就断了。
典型场景：Vue/React组件用class="card"包裹，你在SCSS里写.card { .title { color: var(--color); } }，但忘了在.card本身加--color: red声明——此时.title调用var(--color)，只能回退到:root里的值，或直接失效（无fallback时静默忽略）。
- 打开DevTools → Computed → 搜索
--color，看“Defined in”指向哪一行；如果显示inherited from，说明你写的局部声明根本没命中 - 检查编译后的CSS，确认变量是否真的出现在父容器选择器的声明块里，而不是藏在嵌套规则深处
- 避免用
.card__header { --color: red; }再指望.card__footer继承——它们是兄弟关系，不是父子
SCSS变量和CSS自定义属性是两回事，别混用
SCSS的$color: red是编译期常量，输出时就被替换成red；而CSS的--color: red是运行时可变的自定义属性，靠继承链传递。很多人在SCSS里写.card { --color: $primary; }，以为这就完成了“透传”，其实只是把一个固定值塞进CSS变量——后续JS改$primary毫无意义，也无法动态响应主题切换。
- 需要动态能力，就得用真正的CSS自定义属性，并确保它被声明在可继承的DOM节点上
- SCSS可以用来批量生成不同主题的
:root变量块，但不能替代运行时继承机制 - 若用JS控制主题，直接操作
document.documentElement.style.setProperty('--color', 'blue')，别试图去改SCSS变量
真正难调试的，是SCSS编译后变量声明位置偏移——比如你以为@at-root把变量提到了:root，结果发现它被包裹在某个媒体查询里，导致非匹配条件下根本没生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
