如何修复CSS在SCSS中使用父选择器&后样式拼接错误？

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"。

1. &:hover、&__title、&::before都必须紧贴，中间**零空格**
2. 编辑器开启“显示空白字符”能快速定位隐藏空格
3. VS Code 用户可装插件 “Highlight Bad Chars” 实时标红非法空格

&__element编译出.block .block__element而不是.block__element

这是 SCSS 的默认行为：&代表完整父选择器字符串，&__element本质是字符串拼接，但空格被保留下来，结果生成后代关系而非 BEM 扁平类名。

例如：.card { &__body { padding: 1rem; } } → 输出.card .card__body，语义和性能双崩坏。

1. 正确做法是用@at-root #{&}__body { ... }，强制提级输出.card__body
2. 如果父选择器本身含空格（如.sidebar .widget），&__body会变成.sidebar .widget__body，这已不是合法 BEM，必须避免
3. 别依赖缩进“猜”结构——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 效果”，那就南辕北辙。

1. 想控制子元素响应式表现，必须显式写出：&__title { font-size: 14px; }
2. 想让修饰符随媒体查询变化，不能写&--mobile，而应抽成变量或 mixin，例如$is-mobile: true; + @if $is-mobile { ... }
3. 构建工具链（如 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%不是语法问题，而是前后端脱节或组件封装不一致。

1. 修复路径只有两个：改 HTML 加上class="card__footer"，或改 SCSS 为.card .footer { }（放弃 BEM 拼接）
2. 团队协作时，建议用 ESLint 插件stylelint-scss校验 BEM 类名一致性
3. 别在深层嵌套（≥4 层）里硬套&，浏览器匹配.a .b .c .d .e是从右往左逐级回溯，DOM 一动就断，滚动列表卡顿就是它干的

真正卡住人的，从来不是&怎么写，而是你写的那个card__body，在 HTML 里到底存不存在。不存在，再对的语法也白搭。