var(--x)在子元素中取不到父元素定义的值，是因为css自定义属性只沿dom树向上查找最近已声明的同名变量，不继承、不跨选择器范围；未定义时fallback才生效，空字符串等仍为有效值。
为什么 var(--x) 在子元素里取不到父元素定义的值？
不是继承失效，而是变量根本没被定义到该作用域链上。CSS自定义属性只沿DOM树向上查找最近的、已声明的同名变量，不跨文件、不跨选择器范围。
-
:root中定义的--color全局可用；但若只在.card里写--gap: 12px，那只有它的后代能用，兄弟节点或父级容器拿不到 - 中间某层写了
--text-color: unset或--text-color: initial，会切断继承——此时子元素调用var(--text-color, #000)，#000就会生效 - 变量名严格区分大小写：
--Size和--size是两个变量，不会互相覆盖或继承
如何避免 @import 引发的 CSS 文件级循环依赖？
浏览器本身不解析 @import 的依赖图，但 Vite、Webpack 等构建工具会卡住并报 Circular dependency detected。这不是样式错误，是工程链路问题。
- 禁止在
variables.css或mixins.css这类基础文件中@import任何组件样式（如button.css） - 所有
@import必须单向：仅允许业务组件导入设计 Token，不允许 Token 文件反向导入组件 - 用
postcss-import时开启resolve配置，它会在构建时报出完整路径链：A.css → B.css → C.css → A.css - 更稳的方案：把颜色/间距等抽成
tokens.json，用脚本编译为:root变量，组件里只用var(--spacing-lg)，彻底断开 CSS 文件间引用
继承的是变量定义，不是计算结果——这点最容易调试翻车
比如父元素设了 --size: 2em，子元素写 font-size: var(--size)，这个 2em 始终按父元素的 font-size 计算，不是子元素自己的。你改子元素的 font-size，不会影响 var(--size) 的最终像素值。
- 想让子元素基于自身字号缩放？得写成
--size: 2（无单位），再用font-size: calc(var(--size) * 1em) -
inherit关键字对自定义属性无效——--color: inherit不会去拿父元素的--color值，它只对原生属性起作用 - 要“跳过”继承直接用新值？就在该元素上重声明：
.modal { --z-index: 1000; }，不用加!important或其他修饰
var(--x, fallback) 的 fallback 什么时候真正启用？
只在变量**完全未定义**时触发，不是“继承失败”或“值为空”时才用。很多人误以为中间层设了 --x: "" 或 --x: none 就能激活 fallback，其实不行——空字符串、none、0 都算有效值，var(--x, red) 仍会取它们。
- 确认变量是否真未定义：用浏览器开发者工具的“Computed”面板，看
var(--x)对应的声明是否标灰（表示未找到） - 安全清空方式是
--x: initial或--x: unset，这两者在此场景下效果一致，都会让 fallback 生效 - 别依赖
display: none或content-visibility: hidden来“屏蔽”变量——它们不影响自定义属性的继承查找过程
实际项目里最麻烦的从来不是语法写错，而是变量定义位置和 @import 路径混在一起，导致某处 var() 看似合理却始终 fallback，查半天才发现是构建阶段就循环了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
