变量未生效主因是未被解析而非浏览器问题；需检查声明位置、作用域、语法，确保在CSS层定义并正确继承，避免在内联样式、content、@keyframes及媒体查询中误用var()。
绝大多数“不生效”不是浏览器问题，而是变量压根没被解析出来——卡在声明位置、作用域链或语法环节，连进入渲染流程的机会都没有。
变量定义位置错了，组件根本读不到
组件库（如 antd、Element Plus）通常不读 :root，而是监听其直接父容器上的变量。写在 :root 里却不见效，大概率是宿主元素没继承到。
- 把变量移到外层容器上，例如
.dashboard-page { --primary-color: #52c418; } - Web Components 必须在
:host里显式承接：:host { --primary-color: inherit; } - 普通自定义组件需在宿主元素上声明变量，并确保
<slot></slot>外层有style="all: inherit"
内联样式里写 var(--x) 永远无效
style 属性只接受静态值，var() 解析仅发生在 CSS 层（<style></style> 或外部 .css），HTML 解析阶段直接忽略整条声明。
- DevTools 的 Styles 面板里压根看不到这条规则，Computed 里也查不到来源
- 必须用 JS 主动读取：
getComputedStyle(document.documentElement).getPropertyValue('--primary').trim() - 注意传入正确的节点：若变量定义在
.theme-dark里，就得传该元素，不能传document.documentElement
content 属性中用 var(--x) 是语法错误
content 只接受字符串字面量、attr()、counter()、counters() 四类值，var() 不在其中——浏览器会静默丢弃整条声明，伪元素可能完全不渲染。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
::before { content: var(--icon); }→ 渲染为空或显示为 strike-through - 正确替代：
el.dataset.tip = "已复制";+::after { content: attr(data-tip); } - 别写
content: "→ " var(--label)—— CSS 不支持字符串拼接，var()不能出现在字符串中间
@keyframes 和媒体查询里不能用 var()
两者都是静态规则定义，不参与运行时计算；媒体查询断点解析时变量尚未求值，因此整条声明会被静默忽略。
-
@keyframes slide { from { transform: translateX(var(--offset)); } }→ 完全无效 - 动画中要用变量，必须套
calc(var(--offset))，且变量得定义在触发动画的元素上 - 媒体查询断点不能依赖变量，应改用
window.matchMedia()+ class 切换，或预处理器硬编码
真正容易被忽略的是：变量失效极少报错，多是静默回退。一个字母拼错、少个单位、没插值，就全白搭——调试时最该盯住的不是变量名是否拼错，而是它是否真被解析成了具体值。
