循环中类名拼接时变量未加引号会导致编译失败，因Sass解析器在语法分析阶段要求选择器开头必须是字母、下划线或&，而#{$name}尚未展开，被视为空起始；正确做法是用@each/@for循环或@at-root+&提级，BEM修饰符列表必须为字符串字面量如("hover", "disabled")。
循环中类名拼接时变量未加引号导致编译失败
直接写 .#{$name} 会报错，因为 Sass 解析器在语法分析阶段要求选择器开头必须是字母、下划线或 &，而插值 #{$name} 此时尚未展开，被视为空起始。哪怕 $name: "primary" 已定义，.#{$name}-btn 也会触发 Invalid CSS after ".": expected selector。
真正能用的只有两种方式：
- 用
@each或@for循环，在每次迭代中让插值处于固定前缀之后（如.btn-#{$type}） - 用
@at-root+&提级，或双层插值#{"." + $name}绕过解析限制（但仅限简单场景）
Map 键名与生成类名后缀不一致
比如 Map 定义为 $icons: ("home": "e901", "user": "e902")，但循环里写成 .icon-#{$key}，而 HTML 中实际用的是 class="icon icon-home" —— 中间多了一层基础类，CSS 根本不匹配。
常见排查点：
- 检查
$key是否和你期望的类名后缀完全一致（大小写、连字符、下划线） - 确认拼接逻辑：是
.icon-#{$key}还是.#{$key}，别漏掉或多余前缀 - 如果用了 BEM，
$modifier列表必须是字符串字面量：("hover", "disabled")，不能写成hover, disabled（会被当变量）
Unicode 字符转义错误导致图标内容失效
Map 的 value 是字符串 "e901"，但直接 content: "#{$value}" 会输出 content: "e901"，浏览器不识别；必须加反斜杠并去引号才能变成合法 Unicode 转义。
正确写法：
content: unquote('"\#{$value}"');- 或更稳妥：
content: unquote('"e' + $value + '"');（适用于纯十六进制字符串） - 切勿写成
content: "\#{$value}"—— Sass 会把它当普通字符串，不触发转义
嵌套循环中 & 指向错位引发结构混乱
BEM 元素类（如 .card__header）若在父选择器块内用 &__#{$part}，& 指向的是外层父选择器（如 .card），结果生成的是 .card .card__header，而非扁平的 .card__header。
安全做法：
- 把类名拼接逻辑移出嵌套块，显式用
@at-root或单独声明：.#{$block}__#{$part} - 避免在
.card { @each ... { &__#{$part} { } } }这种结构里依赖& - 连字符位置要小心：
.#{$block}__#{$element}-active中的-active可能被误解析为减法，应写成.#{$block}__#{$element}#{"-active"}
真正容易被忽略的是：**Sass 编译时的语法解析阶段和运行时的插值展开是两个阶段**。很多“看起来该生效”的写法，其实卡在第一关就被拒绝了——不是逻辑错，是根本没机会执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
