css变量值必须为单个合法token，--size: 1rem 2rem因含未包裹空格被解析为两个token而静默失效，导致var(--size)直接回退。
为什么--size: 1rem 2rem会直接失效
浏览器解析 CSS 自定义属性时，对值的语法要求比普通 CSS 属性更严格：它把整个赋值部分当作一个“单值”来处理，中间不能有未包裹的空格、逗号、括号等分隔符。像 --size: 1rem 2rem 这种写法，会被当成两个独立的 token，导致解析失败，该变量被静默忽略——你查 getComputedStyle 也拿不到，var(--size) 回退值直接生效。
常见错误现象包括：
-
--gradient: to top, deeppink, deepskyblue→ 报错或无法被linear-gradient()正确消费 -
--url: url(logo.png?x=1&y=2)→&被当成分隔符，URL 截断 -
--font: "Helvetica Neue", Arial→ 引号不闭合或逗号引发解析歧义
--name 命名里能用中文或 emoji 吗？哪些字符必须转义
可以，但仅限于 Unicode 字母、数字、下划线 _ 和短横线 - 的组合；中文、日文、韩文字符本身合法，无需转义。真正要小心的是这些字符：$ [ ] ^ ( ) % " ' & ; 等——它们在 CSS 解析器中具有语法意义，直接出现会导致解析中断。
转义方式是用反斜杠 \ 前置，且需注意：
-
--header-color和--header-Color是两个不同变量（大小写敏感） -
--my\@domain表示变量名含@，不能写成--my@domain - 转义后的字符仍参与匹配，
--btn\:≠--btn:（后者非法，冒号不能出现在标识符中） - 伪类或属性选择器中引用时，转义必须一致，否则
var(--btn\:)才能取到值
想存 linear-gradient 或 calc() 怎么写才不会被解析错
CSS 变量值本身不做计算，只是字符串占位。但如果你把 calc(100% - 20px) 直接赋给 --width，再在 width: var(--width) 中使用，它**不会自动展开为计算式**——浏览器会原样代入，而 width 不接受裸字符串，结果就是无效值。
正确做法是把函数调用保留在 var() 外层：
html
:root {
--gap: 20px;
}
.box {
width: calc(100% - var(--gap)); /* ✅ 在 calc 内部调用 var */
}
或者用 url()、渐变等复杂值时，确保整个值是合法 CSS 语法片段：
-
--bg: linear-gradient(to top, deeppink, deepskyblue);→ 合法，可直接用于background: var(--bg); -
--icon: url("icon.svg#layer1");→ 合法，#在 URL 内部不需额外转义 -
--breakpoint: 768px;→ 简单值，最安全
为什么 var(--color, black) 的回退值有时也不起作用
回退值只在两种情况下触发：变量未定义，或变量值被解析为 invalid（比如 --color: 123 用在 color 属性上）。但它**不触发于作用域不可见或继承链中断**——例如你在 .child 里写 var(--color)，但 --color 只定义在某个父元素上且没透传，那它就不是“未定义”，而是“不可访问”，此时回退值照样不生效。
容易被忽略的关键点：
-
var(--x, var(--y, white))是合法嵌套，但var(--x, color: red)中的color: red是非法回退值（只能是声明值，不能是完整声明） - 回退值不能含未转义的空格或括号，
var(--size, 1rem 2rem)本身就会让整条声明失效 - 伪元素（如
::before）能读取父级定义的变量，但若父级未定义且自身也没设，就真 fallback —— 这点常被误认为“伪元素不支持变量”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
