SASS `@at-root`

Dit artikel legt @at-root van SASS uit.

We behandelen alles, van het basale gebruik van @at-root tot geavanceerde voorbeelden, stap voor stap.

YouTube Video

Over SASS @at-root

@at-root is een door SASS geleverde directive die wordt gebruikt om geneste selectors of eigenschappen vanuit de huidige nesting naar de bovenliggende scope te verplaatsen. Door deze functionaliteit te benutten, kun je de diepte van de nesting beheersen en efficiënter de beoogde CSS genereren.

Basisgebruik van @at-root

Nesting in SASS maakt code beter leesbaar, maar te diepe nesting kan leiden tot onbedoelde CSS. Met @at-root kun je specifieke codeblokken uitsluiten van de nestingstructuur.

Basis Syntax

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

Voorbeeldgebruik

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

Gecompileerde CSS

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

• Door @at-root wordt .nav-item buiten .nav gegenereerd.

@at-root in geneste selectors

Zelfs binnen diepe nesting kun je met @at-root specifieke selectors naar het rootniveau verplaatsen. Zo kun je ook binnen complexe structuren gecontroleerde CSS genereren.

Voorbeeldgebruik

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

Gecompileerde CSS

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

• Met @at-root wordt .card-title buiten .card-header gegenereerd.

@at-root met argumenten

Door argumenten op te geven, kun je @at-root flexibeler aansturen.

argument 'without'

Als je het argument without gebruikt, negeert de output de opgegeven scopes. Met andere woorden: je kunt bovenliggende regels of mediaqueries verwijderen.

Voorbeeldgebruik

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

Gecompileerde CSS

1.nav__item {
2  color: red;
3}

• In dit geval sluit @at-root (without: media) de mediaquery-scope uit en wordt .nav__item op de root gegenereerd.

argument 'with'

Met with blijven alleen de opgegeven scopes in de output behouden. Handig wanneer je naar de root wilt schrijven terwijl je specifieke scopes behoudt.

Voorbeeldgebruik

 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}

Gecompileerde CSS

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

• @at-root (with: media) verplaatst de selector naar de root waarbij de mediaquery-structuur behouden blijft.

Meerdere voorwaarden opgeven

U kunt ook meerdere scopes tegelijk opgeven, gescheiden door spaties.

Voorbeeldgebruik

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

Gecompileerde CSS

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

• In dit voorbeeld worden zowel rule (normale selectors) als media (mediaqueries) uitgesloten, waardoor .global-style tot geen enkele scope behoort en volledig op rootniveau wordt gegenereerd. Dit is handig wanneer je bewust globale stijlen wilt definiëren, zelfs binnen complexe nesting.

Combineren met mediaqueries

Met @at-root kun je vanuit media queries stijlen op rootniveau genereren. Hiermee kun je responsief ontwerp op componentniveau definiëren.

Voorbeeldgebruik

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

Gecompileerde CSS

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

• Met @at-root kun je ook vanuit mediaqueries stijlen op rootniveau genereren. Zo kun je eenvoudig onafhankelijke globale stijlen per breakpoint definiëren.

Toepassingen voor @at-root

@at-root is handig wanneer je onder specifieke voorwaarden stijlen op rootniveau wilt genereren. Het is vooral nuttig bij het afhandelen van mediaqueries of themaspecifieke stijlen binnen componenten.

Componenten en thema's scheiden

Met @at-root kun je zelfs vanuit mediaqueries onafhankelijke globale klassen genereren. Zo wordt het eenvoudiger om thema's en staten per component te organiseren.

Voorbeeldgebruik

 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}

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

• In dit voorbeeld, terwijl je binnen .card stijlen voor het donkere thema definieert, genereert @at-root een aparte .card-dark-klasse. Hierdoor kun je flexibel tussen klassen wisselen over verschillende thema's heen.

Notities

Houd bij het gebruik van @at-root rekening met het volgende.

1. Vermijd overmatig gebruik @at-root is krachtig, maar overmatig gebruik kan de bedoeling van je nesting vertroebelen.

2. Maak de intentie duidelijk Opmerkingen achterlaten over waarom je @at-root gebruikt, maakt het voor andere ontwikkelaars eenvoudiger te begrijpen.

3. Let op consistentie van scopes Het verplaatsen van output naar de root kan stijlafhankelijkheden veranderen. Wees duidelijk op welke elementen het van toepassing is.

4. Combineer met andere SASS-functies Het combineren van @at-root met @mixin en @function maakt een flexibeler CSS-ontwerp mogelijk.

Samenvatting

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

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video