与根目录嵌套

嵌套可能最常用于创建更具体的选择器，但它也可以仅用于代码组织。使用 @at-root 指令，你可以跳出你在 Sass 中嵌套它的位置，让你回到顶层。这样做可以让你保持样式分组，而不会创建比你需要的更多的特异性。

例如，你可以这样：

.item {
    color: #333;

    @at-root {
        .item-wrapper {
            color: #666;

            img {
                width: 100%;
            }
        }
    }
    
    .item-child {
        background-color: #555;
    }
}

这将编译为：

.item {
  color: #333;
}
.item-wrapper {
  color: #666;
}
.item-wrapper img {
  width: 100%;
}
.item .item-child {
  background-color: #555;
}

通过这样做，我们所有与 .item 类相关的样式都在 SCSS 中，但是我们不一定在每个选择器中都需要该类。

排除背景

默认情况下，@at-root 中的声明将出现在任何上下文中。这意味着例如 @media 块内的规则将保留在那里。

@media print {
  .item-wrapper {
    @at-root {
      .item {
        background: white;
      }
    }
  }
}

// Will compile to
@media print {
  .item {
    background: white;
  }
}

这并不总是需要的行为，因此你可以通过将 media 传递给 @at-root 指令的 without 选项来排除媒体上下文。

@at-root (without: media) {..

有关更多信息，请参阅官方文档