利用 @at-root 重构嵌套结构：告别选择器地狱

用 @at-root 打破 Sass 嵌套限制，生成扁平且可控的 CSS 选择器，优化可维护性。 · 难度：入门 · +10XP

利用 @at-root 重构嵌套结构：告别选择器地狱

Sass 的嵌套很方便，但过度嵌套导致选择器冗长且难以覆盖。本课教你 @at-root 的三种模式：无参数直接跳出嵌套、配合选择器插值生成 BEM 修饰符、以及使用 @at-root (without: media) 在媒体查询内部逃逸。通过实际案例对比传统嵌套与 @at-root 优化后的输出，并讲解何时应该避免嵌套（如全局工具类），构建更合理的样式架构。

.card {
  background: #fff;
  @at-root .card__title {
    font-size: 1.5rem;
  }
  @at-root .card--featured {
    border: 2px solid gold;
  }
  @media (max-width: 600px) {
    // 在媒体查询内使用 @at-root 保持结构清晰
    @at-root (without: media) {
      .card__title {
        font-size: 1rem;
      }
    }
  }
}
// 输出: .card__title { ... } .card--featured { ... }