與根目錄巢狀

巢狀可能最常用於建立更具體的選擇器，但它也可以僅用於程式碼組織。使用 @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) {..

有關更多資訊，請參閱官方文件