CSS中var(--color)找不到值的根本原因是自定义属性未在可继承的作用域内定义；必须在:root中声明才能全局生效，且拼写、作用域和单位需严格匹配，否则静默失效。
CSS 里没有“全局变量”这个概念，var() 调用的是 CSS 自定义属性（custom properties），它依赖于级联和继承机制，不是传统编程语言里的变量。
为什么 var(--color) 有时找不到值？
根本原因：自定义属性必须在某个选择器作用域内被定义（即设置），且调用它的元素必须能从该作用域继承或匹配到该声明。最常见错误是只在局部选择器里定义了 --color，却在父级或无关兄弟元素里用 var(--color) 调用。
- 定义位置决定可访问范围 —— 写在
:root下才接近“全局”效果 - 拼写必须完全一致，
--Color和--color是两个不同属性 - 不能在
@keyframes或@media外部直接调用未定义的var()，会退为初始值（如color: var(--text);中--text未定义 → 等价于color: inherit;）
:root 是模拟全局作用域的唯一可靠方式
:root 匹配文档根元素（通常是 <html>），它的声明会自动成为所有后代元素的继承源。这是目前唯一稳定、跨浏览器支持的“全局定义”做法。
/* 推荐：统一放在 :root 中 */
:root {
--primary: #007bff;
--spacing-xs: 0.25rem;
--radius: 4px;
}
<p>button {
background-color: var(--primary);
padding: var(--spacing-xs) 1rem;
border-radius: var(--radius);
}- 不要写成
html { --primary: ... }—— 它不等价于:root（在 SVG 或某些嵌套上下文中行为不同） - 可以配合
!important覆盖，但极少需要；优先用更具体的选择器重设值 - 值可以是任意合法 CSS 值，包括函数如
var(--shadow, 0 1px 3px rgba(0,0,0,0.1))
var() 不支持计算或拼接，别试图当 JS 变量用
var() 只做值替换，不参与运算。下面这些写法都无效：
立即学习“前端免费学习笔记（深入）”；
/* ❌ 错误示例 */
div {
--size: 16;
font-size: var(--size)px; /* 解析为 "16px"？不，是语法错误 */
width: calc(var(--size) * 2); /* * 不被允许，calc 内部只能用数字/单位/其他 var() */
content: "Item " var(--index); /* 字符串拼接不支持 */
}- 单位必须和变量值一起定义：
--font-size: 16px;，然后font-size: var(--font-size); - 数学运算只能靠
calc()，且其中的var()必须返回纯数字或带单位的值，不能混用 - 响应式切换推荐用媒体查询重设变量值，而不是动态拼接类名或属性
真正容易被忽略的是：自定义属性的值在解析时不会报错，即使写错了也只会静默失效。调试时务必检查 computed styles 面板里该属性是否真的出现在元素的“Styles”或“Computed”标签下，而不是只看 source code 里有没有 var()。
