css变量不生效主因是未被解析，根源在声明位置错误、作用域链断裂或语法问题；组件库不读:root而依赖直接父容器变量，web components需:host{--x:inherit}，内联style不支持var()，@keyframes和媒体查询禁用var()。
CSS变量不生效，90%不是浏览器不支持，而是它压根没被解析出来——卡在声明位置、作用域链或语法环节，连进入渲染流程的机会都没有。
变量定义位置错了，组件根本读不到
绝大多数“不生效”问题，根源是变量没挂到组件能继承到的地方。浏览器按 CSS 加载顺序解析，后定义的同名变量才生效；更重要的是，组件库（比如 antd、Lucid 或自研 Web Components）通常不读 :root，而是监听其直接父容器上的变量。
-
:root { --primary-color: red; }写了但按钮颜色不变？检查按钮是否被某个外层节点包裹，比如.dashboard-page，然后把变量移到那里：.dashboard-page { --primary-color: #52c418; } - Web Components 必须在
:host里显式承接：:host { --primary-color: inherit; }——缺了inherit就等于关死了门 - 普通 HTML 组件（如
<div class="card"><slot></slot></div>）需在.card上声明变量，并给<slot></slot>外层加style="all: inherit"
内联样式里写 var(--x) 永远无效
HTML 的 style 属性只接受静态值，color: var(--primary) 这种写法会被浏览器静默丢弃，DevTools 的 Styles 面板里都看不到它，Computed 里也找不到来源。这不是拼写错误，是浏览器原生限制。
- 想动态用 CSS 变量，必须靠 JS 提前读取再赋值：
getComputedStyle(document.documentElement).getPropertyValue('--primary').trim() - 注意作用域：变量定义在
.theme-dark里，就得传对应元素节点，不能传document.documentElement - 执行时机要卡准：CSS 已加载完成、变量已定义，否则返回空字符串
@keyframes 和媒体查询里不能直接用 var()
@keyframes 是静态规则定义，不参与运行时计算；媒体查询解析器在计算断点时变量尚未求值——两者都禁止直接使用 var(--x)，整条声明会被静默忽略。
- 动画中要用变量，必须套
calc(var(--offset))，且变量得定义在触发动画的元素上（如.grid-item:nth-child(1) { --offset: 100px; }） - 媒体查询断点不能依赖变量，必须硬编码或用预处理器生成；若需动态响应，改用
window.matchMedia()+ class 切换 - 别试图用
@property注册变量绕过——它目前不支持媒体查询上下文
拼写、嵌套和 SCSS 插值容易漏掉细节
CSS 变量失效极少报错，多是静默回退。一个字母拼错、少个单位、没插值，就全白搭。
- 检查 DevTools Elements 面板，点
，在 Styles 里搜--color-primary，确认它是否真实出现在:root声明块中 - 避免嵌套
var()，如rgba(var(--r), var(--g), var(--b), 1)——现代浏览器不支持，整条声明会被丢弃 - SCSS 中往
:root写变量必须用插值：--bg-primary: #{$color-lm-bg-primary};，写成--bg-primary: $color-lm-bg-primary;会生成无效 CSS
最容易被忽略的是：所有降级方案（PostCSS 或 polyfill）都只处理静态可求值的变量。JS 运行时通过 document.documentElement.style.setProperty('--x', 'y') 设置的值，构建工具看不见；真机验证比本地模拟重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
