scss中.icon.heart编译失败是因为.被解析为类名分隔符而非类名组成部分，必须转义为.icon.heart；变量插值#{$var}不自动转义，需预先对特殊字符如.、:、[、]、+等手动加转义，且:deep()内仍须遵守该规则。
SCSS里写 .icon.heart 为什么会编译失败
因为 . 在 CSS 选择器中是类名分隔符，.icon.heart 被解析成「匹配同时拥有 icon 和 heart 两个类」的元素，而不是一个叫 icon.heart 的类。浏览器根本不会去找这个类，SCSS 编译器也会报错或静默忽略。
必须手动转义：写成 .icon.heart —— 注意 . 是紧贴着点写的，中间不能有空格，也不能写成 .icon. heart 或 .icon.（后者漏了字符）。
-
.user:profile→ 正确，匹配id="user:profile" -
[data-id="s0-1-17-5[2]"]→ 方括号和内部的[、]都要各自转义 -
.btn+primary→+是相邻兄弟选择器符号，必须转义才能当类名用
用 #{$var} 拼接带特殊字符的类名时为什么样式不生效
SCSS 变量插值 #{$var} 不会自动转义内容，它只是把变量值原样塞进 CSS 字符串里。如果变量本身没提前转义，拼出来就是非法选择器。
错误示例：
$name: "icon.heart";<br>
.#{$name} { color: red; }
编译结果是
.icon.heart，直接失效。
正确做法有两种：
- 变量定义时就转义：
$name: "icon.heart"; .#{$name} { color: red; } - 在插值前用字符串函数处理（慎用）：
.#{str-replace($name, ".", "\.")}，但不如直接定义干净 - 避免在
@import的外部 SCSS 文件里留未转义的类名——导入即编译，错误可能被吞掉，调试困难
:deep() 里还要不要转义特殊字符
要。Vue 的 :deep() 是伪类函数，里面的内容最终还是走标准 CSS 解析流程。即使写在 :deep() 里，.a.b 依然会被当成两个类，#user:profile 还是会被当成 ID 加伪类。
所以该转还得转：
-
:deep(.icon.heart)✅ -
:deep([data-test="foo[bar]"])✅ -
:deep(.user:profile)✅ -
:deep(.a.b)❌ —— 实际匹配的是同时含a和b类的元素
哪些字符必须转义，哪些可以不转
CSS 规范把以下字符当作语法符号： .、#、[、]、:、+、~、>、空格、*、= 等。只要它们出现在类名、ID、属性名或属性值中，就必须转义。
例外情况极少：
- 纯数字开头的类名如
123abc，必须写成23abc（是 Unicode 十六进制转义，注意后面要跟空格）或3abc（不推荐，易错） - Unicode 字符如中文、 emoji，一般不用转义，但确保文件保存为 UTF-8，且字体支持渲染
- 连字符
-和下划线_安全，无需转义
最稳妥的做法：看到非字母数字字符，先加 再验证；不确定时，用浏览器开发者工具检查生成的选择器是否匹配目标元素——这是唯一真实有效的判断依据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
