devtools显示变量已定义≠实际可用，关键卡在作用域链、加载时机或语法静默失败三处：需检查变量是否被拼写错误、shadow dom未继承、scss未插值、css加载顺序错误或被高优先级规则覆盖。
变量在 DevTools 的 Styles 面板里明明显示在 :root 下，var(--color-primary) 也写了，但颜色就是不生效——这不是浏览器 bug，而是变量“被定义了”不等于“能用上”，关键卡在作用域链、加载时机或语法静默失败这三处。
DevTools 显示已定义 ≠ 变量实际可用
开发者工具的 Styles 面板只展示当前选中元素计算后的样式来源，它会把 :root 里所有自定义属性一股脑列出来，哪怕那行 CSS 根本没加载成功、或被后续规则覆盖、甚至只是拼写错误导致回退为 unset。它不会告诉你“这个 var() 实际解析结果是无效值”。
- 打开 Elements 面板，点
，在 Styles 里找--color-primary：如果它灰掉、带删除线，或悬停提示invalid，说明定义本身就有问题（比如拼错、缺单位、嵌套var()） - 如果它正常显示值，再点目标元素，在 Computed 面板里搜
color，看最终生效的值来自哪条规则——很可能写着color: initial或继承自父级，而不是你期望的变量值 - 检查 Network 面板：哪怕
:root看似存在，也可能来自一个 404 的 CSS 文件（DevTools 有时会缓存旧的样式树）
变量被定义但未进入作用域链
CSS 变量不是全局广播，它依赖选择器作用域和 DOM 继承路径。你在 :root 里写了 --color-primary，不代表所有组件都能读到它——尤其是 Web Components 或 Shadow DOM 封装的组件。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 普通 HTML 组件（如
<div class="card"><button></button></div>）：确保button确实是.card的后代，且.card没有自己重新声明同名变量（.card { --color-primary: blue; }会覆盖:root的值） - Web Components（如
<my-button></my-button>）：:root的变量默认进不了 Shadow Root。必须显式承接：:host { --color-primary: inherit; }，否则var(--color-primary)解析为unset - 使用
<slot></slot>的组件：若插槽内容需继承变量，得给<slot></slot>外层加style="all: inherit"，否则变量继承链被截断
SCSS 编译后变量值为空或非法
如果你用 SCSS 定义变量再注入到 CSS 自定义属性里，常见错误是忘了插值，导致生成的 CSS 是字面量而非真实值。
- 错误写法：
$primary: #1890ff; :root { --primary-color: $primary; }→ 编译后变成--primary-color: $primary;，浏览器直接当无效声明丢弃 - 正确写法：
:root { --primary-color: #{$primary}; }，必须用#{}包裹，让 Sass 在编译期展开 - 如果变量是函数计算值（如
lighten($primary, 10%)），同样要包在#{}里，否则编译失败或输出字符串 - 检查编译后的 CSS 文件，搜索
--primary-color，确认其右侧是否为真实颜色值（如#1890ff），而不是$primary或空值
加载顺序与级联覆盖导致变量“失效”
CSS 是从上到下、按级联顺序解析的。变量定义必须出现在使用它的规则之前，且不能被更高优先级的选择器覆盖。
- 确保定义
:root { --primary-color: ... }的 CSS 文件，在 HTML 中<link>的顺序早于所有引用它的样式表；否则var(--primary-color)回退到初始值 - 框架组件（如 antd 的
.ant-btn）内部可能用了!important或更具体的选择器（如.ant-btn-primary:hover），直接覆盖你的color: var(--primary-color) - 避免在组件内部重复声明同名变量：
.btn { --primary-color: red; }不是设默认值，而是硬编码覆盖，外部主题切换完全失效 - 检查 Computed 面板里
color的来源，如果显示来自element.style或内联样式，说明 JS 动态设置了值，CSS 变量已被绕过
最常被忽略的是：变量定义位置和 Web Components 的 :host 承接——这两处不处理，其他都白调。尤其当团队混用 Vue SFC、React + styled-components 和原生 Custom Elements 时，变量作用域断裂是高频痛点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
