SASS `@at-root`

本文講解 SASS 的 @at-root。

我們將循序漸進地介紹從 @at-root 的基本用法到進階範例的各種內容。

YouTube Video

關於 SASS @at-root

@at-root 是 SASS 提供的指令，用於將巢狀的選擇器或屬性從目前的巢狀層級移動到父層作用域。利用此功能，你可以控制巢狀深度，更有效率地產生符合預期的 CSS。

@at-root 的基本用法

SASS 的巢狀語法讓程式碼更易讀，但過深的巢狀可能會產生非預期的 CSS。透過使用 @at-root，你可以將特定的程式區塊排除在巢狀結構之外。

基本語法

1@at-root {
2  // Code to be output at the parent (root) scope
3}

範例用法

1.nav {
2  color: blue;
3  @at-root {
4    .nav-item {
5      color: red;
6    }
7  }
8}

編譯後的 CSS

1.nav {
2  color: blue;
3}
4.nav-item {
5  color: red;
6}

• 由於使用了 @at-root，.nav-item 會輸出在 .nav 之外。

在巢狀選擇器中使用 @at-root

即使在深度巢狀之中，使用 @at-root 也能將特定的選擇器移動到根層級。這使你即使在複雜結構中也能輸出可控的 CSS。

範例用法

1.card {
2  background: white;
3  .card-header {
4    color: black;
5    @at-root .card-title {
6      font-size: 20px;
7    }
8  }
9}

編譯後的 CSS

1.card {
2  background: white;
3}
4.card .card-header {
5  color: black;
6}
7.card-title {
8  font-size: 20px;
9}

• 透過 @at-root，.card-title 會輸出在 .card-header 之外。

帶參數的 @at-root

透過指定參數，可以更有彈性地控制 @at-root 的行為。

without 參數

使用 without 參數時，輸出會忽略被指定的作用域。也就是說，你可以移除父層規則或媒體查詢。

範例用法

1.nav {
2  @media (min-width: 768px) {
3    &__item {
4      @at-root (without: media) {
5        color: red;
6      }
7    }
8  }
9}

編譯後的 CSS

1.nav__item {
2  color: red;
3}

• 在此情況下，@at-root (without: media) 會排除媒體查詢的作用域，.nav__item 會輸出在根層級。

with 參數

使用 with 時，輸出只會保留被指定的作用域。當你想要在保留特定作用域的同時輸出到根層級時很有用。

範例用法

 1.nav {
 2  &__item {
 3    @media (min-width: 768px) {
 4      @at-root (with: media) {
 5        &-large {
 6          font-size: 18px;
 7        }
 8      }
 9    }
10  }
11}

編譯後的 CSS

1@media (min-width: 768px) {
2  .nav__item-large {
3    font-size: 18px;
4  }
5}

• @at-root (with: media) 會在保留媒體查詢結構的同時，將選擇器移到根層級。

指定多個條件

您也可以同時指定多個範圍，並以空格分隔。

範例用法

1.wrapper {
2  @media (min-width: 600px) {
3    @at-root (without: rule media) {
4      .global-style {
5        color: green;
6      }
7    }
8  }
9}

編譯後的 CSS

1.global-style {
2  color: green;
3}

• 在此範例中，同時排除了 rule（一般選擇器）與 media（媒體查詢），因此 .global-style 不隸屬於任何作用域，會完全輸出在根層級。當你想在複雜巢狀中刻意定義全域樣式時，這很有幫助。

與媒體查詢結合使用

使用 @at-root，你可以在媒體查詢內將樣式輸出到根層級。這使你能夠在元件層級定義響應式設計。

範例用法

1.container {
2  @media (min-width: 768px) {
3    @at-root {
4      .container-large {
5        width: 80%;
6      }
7    }
8  }
9}

編譯後的 CSS

1.container-large {
2  width: 80%;
3}

• 藉由 @at-root，你也可以在媒體查詢內輸出根層級的樣式。這讓你能輕鬆為各個斷點定義獨立的全域樣式。

@at-root 的使用情境

當你想在特定條件下將樣式輸出到根層級時，@at-root 很好用。特別是在元件內處理媒體查詢或主題特定樣式時格外有幫助。

拆分元件與主題

透過 @at-root，即使在媒體查詢內也能產生獨立的全域類別。這使得以元件為單位整理主題與狀態更加容易。

範例用法

 1.card {
 2  background: white;
 3  color: black;
 4
 5  @media (prefers-color-scheme: dark) {
 6    @at-root (with: media) {
 7      .card-dark {
 8        background: #222;
 9        color: white;
10      }
11    }
12  }
13}

編譯後的 CSS

 1.card {
 2  background: white;
 3  color: black;
 4}
 5
 6@media (prefers-color-scheme: dark) {
 7  .card-dark {
 8    background: #222;
 9    color: white;
10  }
11}

• 在此範例中，於 .card 內定義深色主題樣式的同時，@at-root 會產生獨立的 .card-dark 類別。如此一來，你可以在不同主題之間彈性切換類別。

注意事項

使用 @at-root 時，請留意以下幾點。

1. 避免過度使用 @at-root 功能強大，但過度使用可能會模糊巢狀結構的意圖。

2. 明確你的意圖 就為何使用 @at-root 留下註解，可讓其他開發者更容易理解。

3. 留意作用域的一致性 將輸出移到根層級可能會改變樣式的相依性。要清楚它適用於哪些元素。

4. 與其他 SASS 功能搭配使用 將 @at-root 與 @mixin、@function 結合，可實現更具彈性的 CSS 設計。

總結

{^ i18n_speak @at-rootは、SASSのネスト構文を補完する強力なツールです。不要なネストを解消し、構造を整理することで、より明確で再利用性の高いCSSを生成できます。スコープの理解を深め、目的に応じて使い分けることで、プロジェクト全体の可読性と保守性を高めることができます。^}

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video