必须加。bem修饰符名是字符串，不加引号会导致scss误判为变量而报错undefined variable；正确写法是@each $modifier in ("hover", "disabled") { .btn--#{$modifier} { } }，确保修饰符值为字符串字面量。
SCSS中用@each生成BEM修饰符类名时，插值#{$modifier}必须加引号吗？
必须加。BEM修饰符名是字符串，不加引号会导致SCSS编译器误判为变量或未知标识符，直接报错Undefined variable "$hover"之类。
常见错误写法：.btn--#{$modifier} { ... }（当$modifier未定义为变量时）；正确做法是把修饰符列表本身设为字符串数组，并在插值时保留引号语义：
@each $modifier in ("hover", "disabled", "large") {
.btn--#{$modifier} {
// 样式
}
}
- 修饰符列表必须是字符串字面量数组，不能写成
hover, disabled（无引号会被当作变量） - 插值
#{$modifier}本身不带引号，但$modifier的值必须是带引号的字符串，否则编译失败 - 若从map中取值（如
map-keys($modifiers)），需确保map的key是字符串类型，否则map-keys返回的仍是无引号标识符，仍需额外转字符串
嵌套元素类名用@for和@each混合生成时，如何避免&解析错位？
BEM中__嵌套元素必须严格基于父选择器，而&在循环内行为易被误解：它指向的是循环外最近的父选择器，不是循环生成的中间类名。
错误示例（想生成.card__header、.card__footer，但实际输出.card .card__header）：
.card {
@each $part in ("header", "footer", "body") {
&__#{$part} { /* 错：& 指向 .card，结果变成 .card__header 被包裹在 .card 块里 */ }
}
}
- 正确做法是把
&__#{$part}单独作为选择器，不嵌套在.card { ... }块内，或显式用@at-root提级 - 更稳妥的是先定义基础块名变量，再拼接：
$block: "card"; @each $part in ("header", "footer") { .#{$block}__#{$part} { ... } } - 注意
@for不适用于元素名遍历——它生成数字索引，而BEM元素名是语义字符串，优先用@each
用#{}插值拼接__和--时，连字符位置出错导致CSS无效
连字符-在SCSS中不是字符串连接符，"btn"__"icon"会语法报错；必须用+拼接，且两端都需字符串类型。
典型翻车点：
-
.#{$block}__#{$element}✅ 正确（两个插值都是字符串） -
.#{$block}__icon❌ 若$block值为"btn"，结果是.btn__icon，没问题；但若$block未定义，会编译失败 -
.#{$block}__#{$element}-active⚠️ 危险：-active可能被解析为减法运算，应写成.#{$block}__#{$element}#{"-active"}或.#{$block}__#{$element + "-active"} - 推荐统一用
+拼接：.#{$block + "__" + $element + "--" + $modifier}，逻辑清晰，不易歧义
生成大量BEM类名后，CSS体积暴涨，怎么控制输出粒度？
盲目循环所有组合（块+元素+修饰符）会产生冗余类名，比如.btn__icon--large根本没用到，却仍输出CSS。
- 只对真实存在的组合建模：用嵌套map描述结构，而非三层全排列。例如
$components: ("btn": ("elements": ("icon", "text"), "modifiers": ("hover", "primary"))) - 用
@if map-has-key($config, "modifiers")等条件判断，跳过空配置项 - 开发期可加
@debug输出生成路径，上线前用node-sass --output-style compressed压缩，但压缩不解决语义冗余 - 真正省体积靠按需生成——把循环逻辑封装进
@mixin bem()，调用时才展开，避免全局无脑输出
最易被忽略的是：插值本身不触发CSS输出，只有最终选择器被写出时才生成规则；所以控制好@each作用域和@if开关，比压缩工具更治本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
