devtools“样式”面板会红划线提示“invalid property value”，因var()运行时求值失败；需查继承链上最近有效定义，注意大小写、拼写、作用域及@property类型校验。
查 var() 引用时找不到定义的变量
浏览器 DevTools 的 “样式” 面板会高亮显示无效的 var(--xxx)：如果引用的变量未声明，对应属性值会显示为 红色划线，鼠标悬停提示 “Invalid property value” 或 “Property is invalid”。这不是语法错误，而是运行时求值失败——说明依赖链在某处断了。
此时不能只看当前规则里有没有 --xxx，要顺着继承链往上查：
-
:root是最常见定义位置，但不是唯一位置；检查所有父级元素的样式规则（包括类、ID、伪类），看是否在某个选择器作用域内定义了该变量 - 注意大小写：
--MainColor和--maincolor是两个变量，拼写差一个字母就失效 - 变量名带空格、特殊符号（如
--font-size-lg合法，--font size不合法）会导致解析失败，DevTools 通常不报错，但值为空
用 DevTools 的 “计算样式” 面板追踪实际生效值
选中目标元素后，切换到 “计算样式” 面板，找到你关心的属性（比如 background-color），点击右侧小箭头展开。如果该值来自 var()，你会看到类似 “var(--bg-primary) = #2563eb” 的行——这表示变量已成功解析，且右边显示了最终值和它的来源位置（点击可跳转到定义处）。
但如果显示的是 “var(--bg-primary) = var(--bg-primary)”，说明变量没被定义，或定义在不可达的作用域（比如定义在某个子元素里，而你在父元素里引用它）。
关键点：
- “计算样式” 显示的是最终结果，不是原始 CSS；它能绕过级联和继承的干扰，直接告诉你变量是否落地
- 如果变量用了后备值，比如
color: var(--text, #333)，而--text未定义，“计算样式” 会显示#333，但不会告诉你后备值被触发了——得靠对比“样式”面板里的原始声明来判断
识别跨文件或动态注入的变量定义
CSS 自定义属性可以定义在外部样式表、<style></style> 块、内联 style 属性，甚至由 JS 动态写入（element.style.setProperty('--foo', 'red')）。依赖链可能横跨多个来源。
排查方法：
- 在 “样式” 面板里，每个变量定义旁都有一个小图标（通常是文件名或 “inline” 标签），点击可跳转到定义位置；注意区分
styles.css、component.css、<style></style>块和 JS 注入的样式 - 如果变量由 JS 设置，它只影响对应元素及其后代，且优先级高于 CSS 中的同名定义；此时 “计算样式” 里会标注 “
inline style”，但定义本身不会出现在 CSS 文件中 - 使用
getComputedStyle(element).getPropertyValue('--foo')在控制台手动读取，返回空字符串说明变量未定义或作用域不对
警惕 @property 对变量行为的隐式覆盖
如果项目用了 @property（例如 @property --size { syntax: '<length>'; inherits: false; initial-value: 1rem; }</length>），它会注册变量并施加类型约束。此时即使你在某处写了 --size: 20px，若值不符合 syntax 规则（比如写了 --size: '20px' 字符串），变量也会被忽略，且 DevTools 不报错。
这种情况下，依赖链看似完整（有定义、有引用），但值根本不会生效。验证方式：
- 检查 CSS 文件中是否存在
@property声明，尤其注意syntax类型是否匹配你赋的值 - 在控制台运行
CSS.supports('property', '--size')确认浏览器是否识别该注册 -
@property定义必须在引用之前加载，否则注册失败，变量退化为普通自定义属性（无类型校验，但也没默认值）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
