bem 中用 & 嵌套会生成带空格的后代选择器（如 .card .card__title），违背扁平类名要求；正确做法是手动写全名或用 @at-root #{&} 拼接，修饰符必须与块同级，循环需用 @at-root 避免空格。
直接用 & 嵌套写 BEM，90% 的情况会产出带空格的后代选择器（比如 .card .card__title），而不是你要的扁平类名（.card__title）。这不是 Sass bug，是它默认行为——& 只做字符串拼接，空格照单全收。
为什么 &__element 会编译出空格？
Sass 的嵌套规则是：子选择器自动加空格前缀。所以 .card { &__title { } } 实际等价于 .card { .card__title { } }，编译后就是 .card .card__title。BEM 要的是无空格的独立类名，这个空格让选择器权重变高、语义错位、无法单独复用。
- 检查编译结果最简单方法：grep -r " \." dist/css/，搜出所有带空格的选择器就说明踩坑了
- VS Code 自动补全或粘贴时容易混入不可见空格，
&__title和& __title（中间有空格）结果完全不同，后者一定失效 - 一旦用了
&:hover { &__icon { } }，就会生成非法的.btn:hover__icon，浏览器直接忽略
安全写法只有两种：手动写全名 or @at-root #{&}__xxx
想生成 .card__title，必须跳出嵌套层级。Sass 不提供“自动扁平拼接”语法，只能靠显式控制。
- 推荐手动写全名：
.card__title { }—— 最直白、零歧义、编辑器友好、搜索定位快 - 需要动态拼接时（比如变量块名），必须用
@at-root：@at-root #{&}__header { }，确保输出.card__header - 修饰符同理：
@at-root #{&}--featured { }→.card--featured，不能写成&--featured嵌在伪类里
&--modifier 必须和块同级，不能嵌套在状态里
BEM 的修饰符是独立状态标识，不是“某个状态下派生的子类”。把它塞进 &:hover 或 &__item 内部，语义就崩了。
- 错误写法：
.btn { &:hover { &--active { } } }→ 编译出.btn:hover--active，非法类名 - 正确写法：
.btn { &--primary { } &--disabled { } }→.btn--primary、.btn--disabled - 如果要“悬停时图标旋转”，写成：
.btn__icon { @at-root .btn--hover & { transform: rotate(90deg); } }，而不是在&:hover里再嵌&__icon
循环生成 BEM 类名时，& 会指错对象
@each 里直接用 &__#{$part} 看似省事，但 & 仍指向外层块选择器，导致输出带空格的选择器，违背 BEM 扁平要求。
- 错误示例：
.card { @each $part in (header, body) { &__#{$part} { } } }→ 编译为.card .card__header - 正确做法：用
@at-root+ 插值：@at-root #{&}__#{$part} { } - 更稳妥的替代方案：把循环逻辑抽到 mixin 里，传入块名字符串，避免依赖
&的上下文
真正麻烦的不是语法怎么写，而是编译后 CSS 是否符合 BEM 原则——类名是否扁平、修饰符是否可组合、元素类能否脱离 DOM 结构单独使用。光看 Sass 源码没用，最终 CSS 才是运行时依据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
