scss中&必须紧贴后续内容零空格，否则被解析为新选择器起点；&__name默认生成后代选择器，需用@at-root #{&}__name实现bem扁平化；&始终指向最近外层css选择器，不随嵌套上下文变化。
SCSS里&后面多一个空格就失效
这不是“样式没生效”，而是编译器根本没把&当父选择器用。只要&和后续内容之间有空格（包括换行），Dart Sass 就把它当成新选择器的起点，而不是拼接符。
常见错误写法：.btn { & :hover { color: blue; } } → 编译出.btn :hover（后代选择器，非按钮自身悬停）；更糟的是.card { &\n:hover { } }直接报错SassError: Invalid CSS after "&": expected "{", was ":hover"。
-
&:hover、&__title、&::before都必须紧贴，中间**零空格** - 编辑器开启“显示空白字符”能快速定位隐藏空格
- VS Code 用户可装插件 “Highlight Bad Chars” 实时标红非法空格
&__element编译出.block .block__element而不是.block__element
这是 SCSS 的默认行为：&代表完整父选择器字符串，&__element本质是字符串拼接，但空格被保留下来，结果生成后代关系而非 BEM 扁平类名。
例如：.card { &__body { padding: 1rem; } } → 输出.card .card__body，语义和性能双崩坏。
- 正确做法是用
@at-root #{&}__body { ... }，强制提级输出.card__body - 如果父选择器本身含空格（如
.sidebar .widget），&__body会变成.sidebar .widget__body，这已不是合法 BEM，必须避免 - 别依赖缩进“猜”结构——SCSS 不解析 HTML，只按你写的 class 名字硬拼
嵌套中&指向错误父级，比如媒体查询里误以为它指@media
&永远指向**外层最近的 CSS 选择器**，不是当前嵌套块的“上下文”。在@media里写&:hover，它仍指.card，不是媒体查询条件本身。
典型误写：.card { @media (max-width: 768px) { &:hover { opacity: 0.5; } } } → 编译为@media (max-width: 768px) { .card:hover { opacity: 0.5; } }，逻辑上没问题，但若你本意是“小屏下取消 hover 效果”，那就南辕北辙。
- 想控制子元素响应式表现，必须显式写出：
&__title { font-size: 14px; } - 想让修饰符随媒体查询变化，不能写
&--mobile，而应抽成变量或 mixin，例如$is-mobile: true;+@if $is-mobile { ... } - 构建工具链（如 Vite、Webpack）若未启用 SCSS 预处理器，
&会“静默失效”——检查是否用了@import url('./xxx.scss')，应改为@import './xxx.scss'
HTML class 名和 SCSS 编译结果对不上，样式永远不触发
SCSS 编译只管你写了什么，不管 DOM 有没有对应结构。你写了.card { &__footer { } } → 输出.card__footer，但 HTML 是<div class="card"><div class="footer"></div></div>，那.card__footer就永远匹配不到。
这种“失效”90%不是语法问题，而是前后端脱节或组件封装不一致。
- 修复路径只有两个：改 HTML 加上
class="card__footer"，或改 SCSS 为.card .footer { }（放弃 BEM 拼接） - 团队协作时，建议用 ESLint 插件
stylelint-scss校验 BEM 类名一致性 - 别在深层嵌套（≥4 层）里硬套
&，浏览器匹配.a .b .c .d .e是从右往左逐级回溯，DOM 一动就断，滚动列表卡顿就是它干的
&怎么写，而是你写的那个card__body，在 HTML 里到底存不存在。不存在，再对的语法也白搭。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
