如何安全地在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 解析器在读取变量定义阶段就报错，因为外层引号提前闭合了。

URL 或函数类值进变量，优先用 url() 或 calc() 原生语法

CSS 变量不区分「字符串」和「函数调用」，所以 --bg: url(logo.png); 是完全合法的；同理 --width: calc(100% - 2rem); 也能直接生效。这类值不需要、也不应该额外加引号或转义。

但要注意边界情况：

• URL 含空格或括号（如 cat (1).png）→ 必须用引号包住整个 URL：--bg: url("cat (1).png");
• 字体名含空格或符号（如 Helvetica Neue）→ 写成 --font: "Helvetica Neue", Arial;，否则会被截断为 Helvetica
• 变量用于 @supports 或选择器中（如动态 class 名）→ 那就不是 CSS 变量能解决的范畴，得换 JS 或预处理器

Less/Sass 等预处理器里，变量插值和转义规则完全不同

如果你在 Less 中写 @my-url: "a.png"; background: url(@my-url);，Less 会自动拼接并输出 url("a.png")，没问题。但一旦涉及 calc 或含运算符的值，就必须用 ~"" 包裹：

@gap: 20px; --width: ~"calc(100% - @{gap})";

这里 ~"" 是 Less 层的指令，告诉编译器“别解析，原样吐出”；而 var(--width) 是运行时由浏览器解析的。两者不在同一层，不能混用逻辑。

最容易被忽略的是：CSS 变量值里的反斜杠转义，只对 CSS 引擎生效；如果该变量最终被 JS 读取（如 getComputedStyle(el).getPropertyValue('--my-str')），返回的是已解码后的字符串，" 会变成 " —— 这意味着你无法靠变量传递原始转义序列供 JS 二次使用。