SASS `@at-root`

Ten artykuł wyjaśnia @at-root w SASS.

Omówimy wszystko od podstaw użycia @at-root po zaawansowane przykłady, krok po kroku.

YouTube Video

O dyrektywie SASS @at-root

@at-root to dyrektywa w SASS służąca do przenoszenia zagnieżdżonych selektorów lub właściwości z bieżącego zagnieżdżenia do nadrzędnego zakresu. Wykorzystując tę funkcję, możesz kontrolować głębokość zagnieżdżenia i efektywniej generować zamierzony CSS.

Podstawowe użycie @at-root

Zagnieżdżanie w SASS poprawia czytelność kodu, ale zbyt głębokie zagnieżdżanie może prowadzić do generowania niezamierzonego CSS. Korzystając z @at-root, możesz wyłączyć określone bloki kodu ze struktury zagnieżdżenia.

Podstawowa składnia

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

Przykładowe użycie

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

Skompilowany CSS

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

• Dzięki @at-root selektor .nav-item zostaje wygenerowany poza .nav.

@at-root w zagnieżdżonych selektorach

Nawet przy głębokim zagnieżdżeniu użycie @at-root pozwala przenieść wybrane selektory na poziom główny (root). Umożliwia to generowanie kontrolowanego CSS nawet w złożonych strukturach.

Przykładowe użycie

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

Skompilowany CSS

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

• Dzięki @at-root selektor .card-title zostaje wygenerowany poza .card-header.

@at-root z argumentami

Podając argumenty, możesz elastyczniej kontrolować działanie @at-root.

argument 'without'

Gdy użyjesz argumentu without, wynik pominie wskazane zakresy. Innymi słowy, możesz usunąć reguły nadrzędne lub zapytania medialne.

Przykładowe użycie

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

Skompilowany CSS

1.nav__item {
2  color: red;
3}

• W tym przypadku @at-root (without: media) wyłącza zakres zapytań medialnych, a .nav__item zostaje wygenerowany na poziomie głównym (root).

argument 'with'

Użycie with pozostawia w wyniku jedynie wskazane zakresy. Przydatne, gdy chcesz wygenerować style na poziomie głównym (root), zachowując określone zakresy.

Przykładowe użycie

 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}

Skompilowany CSS

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

• @at-root (with: media) przenosi selektor na poziom główny (root), zachowując strukturę zapytań medialnych.

Określanie wielu warunków

Możesz również określić wiele zakresów jednocześnie, oddzielonych spacjami.

Przykładowe użycie

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

Skompilowany CSS

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

• W tym przykładzie wykluczono zarówno rule (zwykłe selektory), jak i media (zapytania medialne), więc .global-style nie należy do żadnego zakresu i jest w całości generowany na poziomie głównym (root). To przydatne, gdy chcesz celowo definiować style globalne nawet w złożonym zagnieżdżeniu.

Łączenie z zapytaniami medialnymi

Używając @at-root, możesz generować style najwyższego poziomu, nawet będąc wewnątrz reguł @media. Dzięki temu możesz definiować responsywność na poziomie komponentu.

Przykładowe użycie

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

Skompilowany CSS

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

• Za pomocą @at-root możesz również generować style na poziomie głównym (root) z wnętrza zapytań medialnych. Ułatwia to definiowanie niezależnych stylów globalnych dla każdego breakpointu.

Przypadki użycia @at-root

@at-root jest przydatna, gdy chcesz generować style na poziomie głównym (root) w określonych warunkach. Szczególnie pomocna przy obsłudze zapytań medialnych lub stylów specyficznych dla motywów wewnątrz komponentów.

Oddzielanie komponentów i motywów

Dzięki @at-root możesz generować niezależne klasy globalne nawet wewnątrz zapytań medialnych. To ułatwia organizowanie motywów i stanów na poziomie komponentu.

Przykładowe użycie

 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}

Skompilowany 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}

• W tym przykładzie, definiując style dla ciemnego motywu wewnątrz .card, @at-root generuje osobną klasę .card-dark. Umożliwia to elastyczne przełączanie klas między różnymi motywami.

Notatki

Korzystając z @at-root, pamiętaj o następujących kwestiach.

1. Unikaj nadużywania @at-root jest potężna, ale jej nadużywanie może zacierać zamysł zagnieżdżenia.

2. Wyjaśniaj intencje Pozostawianie komentarzy wyjaśniających, dlaczego używasz @at-root, ułatwia innym programistom zrozumienie kodu.

3. Zwracaj uwagę na spójność zakresów Przeniesienie wynikowych reguł na poziom główny może zmienić zależności między stylami. Jasno określ, których elementów to dotyczy.

4. Łącz z innymi funkcjami SASS Połączenie @at-root z @mixin i @function umożliwia bardziej elastyczne projektowanie CSS.

Podsumowanie

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

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video