SCSS中转义字符编译后“消失”是因Dart Sass在字符串解析阶段即按规则处理Unicode转义，无效码点（如大小写错误、含空格）会被直接丢弃；选择器中. : [ ]等需手动双反斜杠转义，CSS变量存转义须避免引号包裹，XML中嵌SCSS应抽离至独立文件。
SCSS里写的转义字符编译后“消失”或“错乱”，不是编译器坏了，是它在解析阶段就按规则吃掉了你的反斜杠——而且吃法很固定，不看上下文，只认语法阶段。
SCSS字符串内反斜杠被提前解析
Dart Sass（当前主流实现）在解析字符串字面量时，会主动识别并处理转义序列，比如"\201C"会被当作 Unicode 码点尝试解析；如果码点无效（如\201c小写、\ 201C带空格）、超出范围，或者根本不是标准转义（如"\["），Sass 就直接丢弃整个转义，只留空或报错。
-
"\201C"✅ 编译为 “（左双引号） -
"\201c"❌ 编译为空字符串（大小写敏感） -
"\ ["❌ 编译失败或丢弃（空格破坏格式） - 想输出字面量
\201C四个字符？必须用插值："#{"\201C"}"
选择器里的点、冒号、方括号不转义就编译失败
CSS 规范把 .、:、[、] 当作语法符号，不是类名/ID 的普通字符。SCSS 不会帮你自动转义，写了 .icon.heart 就是两个类选择器连用，不是单个类名。
- 类名含点号：
.icon\.heart（注意反斜杠后紧跟点） - ID 含冒号：
#user\:profile（否则被当伪类#user:profile） - 属性值含方括号：
[data-id="s0-1-17-5\[2\]"]（\[和\]都要转） - Vue
:deep()内部仍是原生 CSS 规则，同样要手动转义
变量存转义字符后无法被 attr() 或 var() 正确使用
CSS 变量（--quote: "1C"）存储的是字符串字面量，不是运行时可解析的转义。浏览器读到 var(--quote)，拿到的就是四个字符 1C，不是 Unicode 字符。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确存法：
--quote: "“";（UTF-8 字符直写，文件编码必须是 UTF-8 without BOM） - ✅ 或十六进制无引号：
--quote: \201C;（注意没引号） - ❌ 错误存法：
--quote: "\201C";（引号+转义 → 字面量字符串） -
content: var(--quote) attr(data-title)是非法语法，CSS 不支持多个content值拼接
MyBatis XML 里写 SCSS 变量或内联样式容易二次出错
如果 SCSS 片段嵌在 MyBatis 的 XML 映射文件中（比如 <style>...</style>），那它得同时过两关：XML 解析器和 Sass 解析器。XML 先把 <、& 当语法符号吃掉，等 Sass 拿到时可能已残缺。
- XML 中不能直接写
<、&，必须用实体：、<code>& - SCSS 字符串里再套一层转义？别试，
" 过了 XML 变成 <code>"<"，Sass 再解析又可能丢 - 稳妥做法：把含特殊字符的样式抽离到独立 SCSS 文件，用
@use引入，避开 XML 解析层
最常被忽略的一点：开发者工具里看到的“生效样式”，未必是你写的那条规则——它可能来自其他同名类、全局重置、或未转义的选择器被浏览器静默忽略后，由更宽泛的规则兜底匹配。查不到效果时，先检查编译输出的 CSS 是否真包含你写的那个选择器或值。
