SCSS中content写双引号需用单引号包裹（如content: '"Hello"'）或十六进制转义（如content: "\201C"），避免反斜杠转义错误；CSS变量定义引号时外层勿加引号，attr()函数不可加引号。
SCSS里写content: "\""会编译出错
直接在 SCSS 中写 content: "\"\""，Dart Sass 会把反斜杠当转义符处理，最终生成的 CSS 可能是 content: """ 或解析失败。这不是你手误，而是 SCSS 对字符串内双引号的默认转义规则在起作用。
根本原因：SCSS 字符串解析器优先处理 \ + 引号组合，哪怕你本意只是想塞两个双引号进 content。
- ✅ 正确做法：用单引号包裹整个值，内部双引号不加转义——
content: '"Hello"'; - ✅ 或者统一用十六进制转义——
content: "\201C";（前引号）和content: "\201D";（后引号） - ❌ 避免混合引号+反斜杠：像
content: "\"Hello\"";这种写法在 Dart Sass 下极不稳定，不同版本行为不一致
用CSS变量传引号内容时，外层引号不能加
很多人想通过 var(--quote) 统一管理引号样式，但写成 --quote: ""; 就埋了雷：外层引号会被存进变量值里，导致 content: var(--quote); 实际渲染出 ""（四个字符），而不是空字符串或一对引号。
- ✅ 正确定义变量：
--quote: \201C;或--quote: "“";（注意这里只有一层引号，且是 UTF-8 字符） - ✅ 如果必须用双引号字面量，变量里写：
--quote: " \" ";（内部双引号用反斜杠转义，外层不加多余引号） - ⚠️ 注意：CSS 变量不支持嵌套
attr()或counter()，所以content: var(--quote) attr(data-title);是非法的，得拆成两个伪元素或改用 JS 补位
Dart Sass对\uxxxx转义的兼容性问题
你在 SCSS 里写 content: "\e900"; 插字体图标，本地开发看着正常，打包后变成方块——大概率是 Dart Sass 把 \e900 当普通字符串处理，没透传给 CSS 解析器，或者中途被二次转义。
- ✅ 最稳方案：把伪元素样式抽到独立
.css文件里，绕过 Sass 编译流程 - ✅ 次选方案：在
vue.config.js或 Webpack 配置中锁定 Sass 输出格式：sassOptions: { outputStyle: 'expanded' }，避免压缩阶段误伤转义序列 - ⚠️ 别依赖
\uE900写法：CSS 标准只认\xxxx四位十六进制，\u前缀是 JS/HTML 的习惯，CSS 里无效
::before里content显示"attr(data-tip)"而不是真实值
这个错误和 SCSS 关系不大，但常在 SCSS 嵌套中被放大：你写了 &::before { content: "attr(data-tip)"; }，结果页面真就显示“attr(data-tip)”五个字。
- ✅ 必须去掉外层引号：
content: attr(data-tip);——attr()是 CSS 函数，不是字符串 - ✅ 确保 HTML 元素确实有
data-tip属性，拼错名（比如写成data-tooltip）或属性为空都会返回空字符串，不报错也不 fallback - ⚠️
attr()不响应式：JS 改了data-tip值，浏览器不会自动重绘伪元素，得靠触发重排（比如改 class、height 等）才能更新
真正容易被忽略的是：SCSS 只负责生成 CSS 字符串，而 content 的最终表现取决于浏览器如何解析那行 CSS。别在 SCSS 层面过度设计转义逻辑，优先用 UTF-8 字符、严格四字符十六进制、或干脆剥离到纯 CSS 文件——简单比“聪明”更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
