&是Sass中代表当前嵌套规则完整前缀的选择器副本，用于静态拼接生成BEM类名（如&__item→.card__item），但仅限单层块级嵌套；它不映射DOM结构，跨层或含组合器时会生成非法类名，需配合@at-root或插值确保扁平化。
什么是 & 在 Sass 中的真实作用？
& 不是“父元素选择器”，而是“当前选择器的完整前缀副本”。它在嵌套中展开为外层所有选择器的拼接结果，不是 DOM 父子关系的映射。这点误解会导致 BEM 类名生成错误——比如你以为 &__item 会绑定到上一层的块名，但若嵌套过深或用了多重组合器，& 可能带出意外的层级（如 .header .nav__list &__item）。
用 BEM 时，你真正需要的是“块名复用”，而非无脑拼接。所以 & 只应在**单层嵌套 + 块名即最外层类名**的前提下直接使用。
怎么写才符合 BEM 规范又不翻车？
BEM 要求块（block）、元素（element）、修饰符（modifier）三者语义清晰、扁平化、无依赖层级。Sass 的 & 只适合生成 __ 和 -- 部分，不能用于模拟 HTML 结构嵌套。
- ✅ 正确：块名定义一次，所有
&__xxx和&--xxx都基于它展开 - ❌ 错误：在
.block > .wrapper内再用&__item——这时&展开为.block > .wrapper，生成的类名变成.block > .wrapper__item，违反 BEM 元素必须直属于块的规则 - ⚠️ 注意：
&在伪类/伪元素中也生效，如&:hover→.btn:hover，&::before→.btn::before，这反而是安全且常用的做法
常见 BEM 场景下的 & 写法示例
以 .card 块为例，典型结构如下：
立即学习“前端免费学习笔记（深入）”；
.card {
&__title { font-size: 1.2rem; }
&__content { padding: 1rem; }
&--featured { border: 2px solid gold; }
&:hover { transform: translateY(-2px); }
// ❌ 不要这样：
// .card__header {
// &__subtitle { ... } // 这里 & 展开为 .card__header，生成 .card__header__subtitle —— BEM 禁止嵌套元素
// }
}
如果真需要子元素变体（比如 .card__header 下的图标），应单独定义：.card__header-icon，而不是靠嵌套生成。
为什么有些人用 & 写 BEM 最后改用 @use + 函数？
当项目变大、块名来自变量或需动态拼接时（例如组件库中 $block: 'ui-button'），硬写 &__icon 就不够用了。这时候会转向更可控的方式：
- 用
#{}插值配合变量：.#{$block}__icon - 封装
bem()混合宏，显式传入块名、元素、修饰符 - Sass 6+ 推荐用
@use导入工具函数，避免全局污染
& 是快捷键，不是 BEM 引擎。它省得了手敲，省不了设计约束——BEM 的复杂点从来不在语法，而在团队对“什么算一个块”“元素能否跨块复用”的持续对齐。
