SCSS字符串拼接后双引号“消失”，是因为编译器在解析阶段将非法引号结构（如""Hello""）视为空字符串合并或直接报错，而非原样输出；正确做法是用转义（"\""）、单引号包裹（'"Hello"'）或插值（#{"\"" + $text + "\""}）确保CSS中生成合法双引号字符。
SCSS字符串拼接后双引号消失，是因为编译器提前解析了引号结构
SCSS不是“把字符串原样塞进CSS”，而是在编译阶段就对字符串做语法解析。当你写 content: str-insert('"Hello"', ' World', 7)，str-insert 返回的是一个带引号的字符串字面量 "\"Hello World\""（注意：这是 SCSS 内部表示），但如果你没处理好引号嵌套，最终生成的 CSS 可能变成 content: "Hello World"; —— 看似正常，实则丢失了原始意图中的「外层引号语义」。
更典型的问题是：你想拼出 content: ""Hello"";（即 CSS 中显示两个双引号），但 SCSS 解析器在读到 ""Hello"" 时，会把它当作“空字符串 + Hello + 空字符串”，直接合并为 "Hello"，然后报错或静默修正。
- SCSS 字符串字面量必须用单引号或双引号包裹，且引号必须成对；
""不是合法字符串，会被截断或忽略 -
unquote()只能剥掉最外层引号，不能恢复被解析器丢弃的嵌套引号结构 - 想让 CSS 输出双引号字符（即
"这个符号），必须用转义："\""或'"'，而不是靠拼接引号
content属性里要显示双引号，为什么不能用字符串拼接？
CSS 的 content 属性值是运行时由浏览器解析的，它不认 SCSS 的字符串逻辑。你拼出来的 "\"Hello\"" 经过 unquote() 后变成 "Hello"，再塞进 content 就是合法的；但如果你目标是显示「左右各一个双引号」，比如 “Hello”，那拼接 "\"" + "Hello" + "\"" 是错的——因为 "\"" 在 SCSS 中本身就是表示一个双引号字符，不是“两个引号符号”。
- 正确写法是直接写：
content: "\"Hello\"";（双引号字符串内用\"转义） - 或者用单引号避免转义负担：
content: '"Hello"'; - 若需动态拼接，必须用插值：
content: #{"\"" + $text + "\""}，否则str-insert返回的仍是带引号字符串，再套一层引号就变成四重引号，编译失败 - Dart Sass 1.60+ 对非法引号结构更严格，
""Hello""会直接拒绝编译，不再静默修复
str-insert 拼接路径或 URL 时，双引号为什么会“意外消失”？
常见错误是把 str-insert 当作 CSS 值构造器，却忽略了它只返回字符串、不控制上下文引号规则。例如：background-image: url(str-insert("assets/", "icon.svg", 8));，这里 str-insert 返回 "assets/icon.svg"（带引号），而 url(...) 在 CSS 中允许带或不带引号，但 SCSS 编译器会按规则决定是否保留——压缩模式下默认抹去冗余引号，结果变成 url(assets/icon.svg)，看似没问题，但一旦路径含空格或特殊字符（如 "assets/my icon.svg"），就立刻失效。
- 安全做法是显式包裹：
url("#{str-insert($base, $file, str-length($base) + 1)}") - 更推荐用
unquote()配合原始路径变量：$path: unquote("assets/"); background-image: url(#{$path}icon.svg); - 永远不要依赖编译器“自动加引号”：CSS 规范要求 URL 值含空格、括号、中文时必须加引号，这个责任在 SCSS 层就得明确写出
变量中存带引号的字符串，为什么 attr() 或 var() 用不了？
CSS 自定义属性（--xxx）和 attr() 函数接收的是纯文本字面量，不进行二次 SCSS 解析。你写 --quote: "\"Hello\"";，实际存入的是 9 个字符：" " H e l l o " "，浏览器读取 var(--quote) 时，就照着这 9 个字符传给 content，CSS 引擎会尝试解析为字符串，但开头结尾的引号不是合法 token，直接报错或忽略。
- 正确存法是 UTF-8 字符直写：
--quote: “Hello”;（确保文件编码为 UTF-8 without BOM） - 或用十六进制无引号写法：
--quote: \201C Hello \201D;（注意外层没引号，\201C 是左双引号 Unicode） -
attr(data-title)和var(--x)不能混用在同一个content值里，CSS 不支持多源拼接，写成content: var(--quote) attr(data-title);是语法错误
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
