“unknown computed value”表示浏览器求值失败且未回退，默认因祖先链无声明、all:unset、display:none、@media未匹配、Shadow DOM未显式承接或预处理器插值缺失所致。
DevTools 显示 “unknown computed value” 不代表变量没定义，而是浏览器无法在当前上下文完成解析——通常卡在作用域缺失、语法错误或继承链断裂上。
为什么 Computed 面板里 var(--x) 显示 unknown
Computed 面板只显示最终计算出的 CSS 属性值（如 color、background-color），它不展示变量本身。当你看到 var(--x) 被标为 “unknown computed value”，说明：浏览器尝试求值失败，且没 fallback 到初始值（比如 inherit 或 transparent），直接放弃计算。
- 最常见原因是目标元素的祖先链上**根本没声明过
--x**——不是拼错，是压根没挂到 DOM 任何节点上 - 父级用了
all: unset或contain: style，主动切断了自定义属性继承 - 元素处于
display: none或content-visibility: hidden状态，浏览器跳过样式计算 - 变量写在
@media块内，但当前视口不匹配，规则未激活，--x就不算“已声明”
Styles 面板显示变量但 Computed 不认，怎么办
Styles 面板列出的是“所有被解析的自定义属性声明”，不管它们是否生效；Computed 面板反映的是“实际参与渲染的值”。两者不一致，说明变量定义了，但没传到目标元素。
- 在 Elements 面板中右键目标元素 → “Scroll into view”，确认它真在 DOM 树里（不是 Fragment 或 Portal 渲染的）
- 点开该元素，在 Styles 面板顶部搜索
--x，看有没有带删除线或灰掉的声明——有则说明语法非法（比如--x: 20缺单位） - 切换到 Computed 面板，搜
color（或其他使用了var(--x)的属性），点开值旁箭头，看 “Defined in” 指向哪条规则；如果指向，说明中间某层覆盖或丢失了 - 检查父容器 computed 的
display和visibility，排除display: contents或visibility: hidden干扰继承
Shadow DOM 中 var(--x) 显示 unknown 的典型场景
Shadow Root 默认不继承宿主（host）的 CSS 变量，var(--x) 在组件内部求值时找不到来源，直接返回 unknown。
立即学习“前端免费学习笔记（深入）”；
- 不要指望
:root { --x: red; }自动透入<my-button></my-button>的 shadow 内部 - 必须显式承接：
:host { --x: inherit; }，或在 JS 中设置：host.style.setProperty('--x', 'red') - 若用
<slot></slot>投影内容，且内容里用了var(--x)，需给<slot></slot>外层加style="all: inherit"，否则继承链在 slot 边界中断 - React/Vue 中通过 props 传 theme 对象？没用——变量必须落到真实 DOM 元素的
style属性或 CSS 规则里才参与继承
SCSS/Less 编译后变量值为空导致 unknown
预处理器变量不会自动转成 CSS 自定义属性，漏掉插值会导致生成无效声明，浏览器静默丢弃，--x 实际未定义。
- 错误：
--x: $value;→ 编译后是--x: $value;，浏览器不认识 - 正确 Sass：
--x: #{$value};（且$value: 16px必须带单位） - 正确 Less：
--x: ~"@{value}";，不能用@value直接拼 - 验证方式：打开 Network 面板，找加载的 CSS 文件，搜索
--x:，确认后面跟的是真实值（如16px），不是变量名
真正容易被忽略的是：DevTools 的 “unknown computed value” 提示本身不提供线索——它不告诉你缺作用域、还是语法错、还是被 contain 截断。必须手动逐层查 DOM 位置、检查 computed display/visibility、确认变量是否真出现在生效的 CSS 规则里，而不是只盯着 Styles 面板里的“已定义”字样。
