SCSS嵌套规则是前端开发者经常遇到的坑，尤其对于刚接触Sass的新手，以下这几个编译错误最为常见，掌握它们能帮你绕过大部分陷阱。

父选择器 & 后多空格导致SCSS嵌套失效

SCSS 中 `&` 必须紧贴前一个字符，中间不能出现任何空格。一旦加入空格，Dart Sass 就不再将其视为父选择器引用，而是当成新选择器的起点——结果要么编译出孤立类（比如生成 `.header` 而非 `.card .header`），要么直接抛出错误。 以下是常见的错误示例： - `.card { & .header { } }` → 编译为 `.card .header`，但 `&` 并未参与拼接，纯粹是冗余占位 - `.btn { & :hover { } }` → 报错 `SassError: Invalid CSS after "&&": expected "{", was ":hover"` - `.modal { &:focus { } }` 正确；`.modal { & :focus { } }` 错误（空格位于中间）

嵌套子选择器未使用 & 绑定，变成顶层规则

SCSS 并不依赖缩进来“猜测”关系，它只认显式绑定。如果子选择器开头不包含 `&`、`@at-root` 或明确的关系符（如 `>`、`+`、`~`），它会被当作文档根级的新规则处理，从而生成非法或无效的选择器。 典型现象包括： - `.emotion { __text { color: blue; } }` → 编译出 `__text { }`（浏览器直接忽略，因为不是合法选择器） - `.card { .card__body { padding: 1rem; } }` → 生成 `.card .card__body`，但已脱离 BEM 拼接逻辑，导致权重变高 - 正确写法必须是：`.emotion { &__text { color: blue; } }` → 输出 `.emotion__text`

HTML class 名与 SCSS 嵌套选择器不匹配，样式不生效

SCSS 编译只关心你写了什么 class 名，并不检查 HTML 中是否有对应结构。样式“不生效”的案例中，90% 是 class 名脱节，而非语法错误。 例如： - SCSS 写了 `.card { &__body { padding: 1rem; } }` → 输出 `.card__body { }` - 但 HTML 是 `

` → `.card__body` 根本没有匹配目标 - 修复只有两个方向：将 HTML 改为 `class="card__body"`，或修改 SCSS 为 `.card .body { }`（放弃 BEM 拼接）

嵌套层级过深或混用 @at-root 导致选择器路径失控

超过 4 层嵌套时，`&` 会展开整条父路径，生成像 `.layout .dashboard .card .header__title:hover` 这样的长选择器。它不但体积大、难以调试，而且浏览器匹配效率低，DOM 结构稍有变动就会失效。 更隐蔽的问题是 `@at-root` 用错位置： - `.modal { @at-root .u-text-center { text-align: center; } }` → 正确输出 `.u-text-center` - `.modal { @at-root (with: .theme-dark) { .button { color: white; } } }` → 输出 `.theme-dark .button`，可控 - 但如果在 `@media` 块里嵌套再使用 `&`，比如 `@media (min-width: 768px) { .card { &__title { &:hover { } } } }`，`&` 会将外层所有嵌套都拖进来，导致路径失控

真正让开发者反复踩坑的，从来不是“如何让嵌套看起来整齐”，而是删除一层缩进后，HTML 中对应的 class 是否依然存在。如果不存在，嵌套就是无效空转；如果存在，再严格检查 `&` 是否紧贴、有无空格、关系符是否遗漏——这些细节错一个，父级选择器就会彻底丢失。