如何安全地在CSS变量中嵌入特殊字符，避免转义与引号问题？

本文共计824个文字，预计阅读时间需要4分钟。

当你写 `` --my-str: +

正确做法是不加外层引号，让变量值保持裸字符串状态：

• --my-str: hello world;（无引号，空格合法）
• --my-str: a,b,c;（逗号不需转义）
• --my-str: url(data:image/svg+xml;base64,...);（整个 url 是合法标识符，无需包裹）

需要保留引号时，必须用反斜杠转义内部引号

比如你想在 content 中输出带双引号的句子："他说：'今天真好'"。不能靠变量外层加引号解决，得在变量值内部转义：

:root { --quote: "他说：'今天真好'"; }

立即学习“前端免费学习笔记（深入）”；

注意两点：

• 双引号用 "，单引号用 '，反斜杠本身要写成 \
• 转义后变量值仍是纯字符串，content: var(--quote); 才能正确渲染

别写成 --quote: ""他说：'今天真好'""——这会让 CSS 解析器在读取变量定义阶段就报错，因为外层引号提前闭合了。