CSS自定义属性值中逗号、空格、引号等分隔符会导致解析失败，使声明静默失效；正确写法应避免外层引号，保留合法CSS语法结构，如--font-family: Helvetica Neue, Arial。
为什么--font: "Helvetica Neue", Arial会静默失效
浏览器解析 CSS 自定义属性时，把整个赋值部分当作一个「单 token」处理。逗号、空格、引号这些字符在 CSS 语法里是分隔符，不是字符串的一部分。写成 --font: "Helvetica Neue", Arial，解析器会在第一个逗号处断开，认为你给了两个值，直接忽略整条声明——查 getComputedStyle 拿不到，var(--font) 回退到默认值。
常见静默失效场景包括：
-
--gradient: to top, deeppink, deepskyblue→ 解析为三个 token，变量未定义 -
--url: url(logo.png?x=1&y=2)→&被当成分隔符，URL 截断成url(logo.png?x=1 -
--size: 1rem 2rem→ 空格导致两 token，整个声明被丢弃
var(--font-family) 中的引号到底该不该加
不该加外层引号。CSS 变量存的是「计算后值」，不是原始字符串。写成 --font-family: "Helvetica Neue", Arial，双引号会被当成字面量存进去，后续 font-family: var(--font-family) 实际等价于 font-family: ""Helvetica Neue", Arial"，多了一层引号，字体加载失败或回退到默认字体。
正确写法是裸字符串：
立即学习“前端免费学习笔记（深入）”；
-
--font-family: Helvetica Neue, Arial（无引号，空格合法） -
--font-family: system-ui, -apple-system（逗号不需转义） -
--icon: url(data:image/svg+xml;base64,...)（整个url()是合法 token，不包引号）
需要输出带引号的 content 怎么办
比如想在 ::before 里显示 "他说：'今天真好'，不能靠变量外层加引号解决，必须在变量值内部用反斜杠转义。
正确做法：
- 单引号用
'，双引号用"，反斜杠本身写成\ :root { --quote: "他说:'今天真好'"; }.el::before { content: var(--quote); }
错误写法：--quote: ""他说:'今天真好'"" —— 外层双引号提前闭合，解析阶段就报错。
calc() 和 url() 进变量要不要转义
不需要，而且加了反而错。CSS 变量允许直接存函数调用片段，只要它本身是合法 CSS 语法。
-
--width: calc(100% - 2rem)✅ 直接生效，但注意：不能写成width: var(--width)，得写成width: calc(var(--width))或更常见的是width: calc(100% - var(--gap)) -
--bg: linear-gradient(to top, deeppink, deepskyblue)✅ 可直接用于background: var(--bg) -
--src: url(./icon.svg)✅ 合法，不要写成--src: "url(./icon.svg)"
真正容易被忽略的是：变量值不参与运行时计算，只是字符串占位；var(--width) 插入到非函数上下文（如 width:）里，等于把字符串塞进本该接收数值的位置，结果无效。
