& 是 sass 中的父选择器引用符，用于在嵌套规则中原样插入当前直接父选择器字符串，仅作编译时静态替换，不参与运行时逻辑，也不自动处理 bem 命名规则。
什么是 & 在 Sass 中的实际作用？
& 是 Sass 中的父选择器引用符，它不是拼字符串，也不是生成 BEM 的魔法符号——它只是把当前嵌套规则的父选择器原样“插入”到当前位置。很多人误以为 & 会自动加连字符或处理命名逻辑，其实它完全不关心 BEM 规则，只做字面替换。
比如：
.block {
&__element { color: red; }
&--modifier { font-weight: bold; }
} 编译后就是：.block__element { color: red; }
.block--modifier { font-weight: bold; } 这里 & 展开为 .block，然后直接拼接后面的部分。
为什么 &（HTML 实体）不能在 Sass 中用？
你在代码里写 &，Sass 解析器看到的是 HTML 实体字符，不是语法符号——它根本不会识别为父选择器，而是当作普通文本字面量处理，最终编译成无效 CSS 或报错 SassError: Invalid CSS。
必须写成未转义的 & 字符。常见踩坑场景：
- 从网页复制代码时粘贴进了
&（比如从博客、文档页 Ctrl+C） - 编辑器自动 HTML 转义（尤其某些 Markdown 预览插件）
- 误以为要“安全写法”而手动转义
检查方法：打开 .scss 文件源码，搜索 & ——如果存在，全部替换成 &。
如何用 & 正确生成 BEM 的多层嵌套类名？
BEM 不是靠单个 & 自动推导的，而是靠你手动组织嵌套结构 + 合理使用 & 拼接。关键在于层级是否对应语义，而不是符号本身有多智能。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
例如实现 .block__element--modifier：
.block {
&__element {
color: blue;
&--modifier { background: yellow; }
}
}
编译结果：
.block__element { color: blue; }
.block__element--modifier { background: yellow; } 注意：这里 & 在第二层展开为 .block__element，不是 .block。
容易出错的点：
- 想写
&__element--modifier却忘了外层已嵌套，导致生成.block__element--modifier（正确）还是.block.block__element--modifier（重复）取决于上下文 - 用
&拼接伪类时漏空格，如&:hover✅，但&:hover&--active会变成.block:hover.block--active，而非预期的.block--active:hover
什么时候不该用 &？
当你要脱离当前父级语义、或需要动态构造类名时，& 反而会让逻辑变脆。比如：
- 想复用同一套样式到不同 block 下（
.header__title和.card__title共享样式），硬套&会导致重复代码 - 需要生成
.block.is-active这种修饰类（非 BEM 命名），&.is-active会生成.block.is-active，但若父级是.block__element，就变成.block__element.is-active—— 语义错位 - 用
@extend或%placeholder更合适的地方，强行用&嵌套会让 CSS 体积膨胀
BEM 类名生成的核心从来不是符号技巧，而是你对组件边界的判断是否清晰。写错一次 & 可能只多一个点，但结构混乱了，后面改起来就得全局 grep。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
