CSS变量值不应加外层引号，否则引号会被当作字面量存储；正确写法是--my-str: hello world;，需转义时用"或'，URL和calc等原生语法可直接使用。
直接用引号包裹变量值会破坏 CSS 变量解析
当你写 --my-str: "hello world";，CSS 会把双引号当作字面量的一部分存入变量，后续用 var(--my-str) 插入 content 或 font-family 时，浏览器可能多套一层引号，导致语法错误或字体加载失败。这不是 bug，而是 CSS 变量设计如此：它存储的是「计算后的值」，不是原始字符串。
正确做法是不加外层引号，让变量值保持裸字符串状态：
-
--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 二次使用。
