SASS `@at-root`

Denne artikel forklarer SASS' @at-root.

Vi gennemgår alt fra grundlæggende brug af @at-root til avancerede eksempler, trin for trin.

YouTube Video

Om SASS @at-root

@at-root er et direktiv leveret af SASS, som bruges til at flytte indlejrede selektorer eller egenskaber fra den aktuelle indlejring til det overordnede scope. Ved at udnytte denne funktion kan du styre indlejringsdybden og generere den tilsigtede CSS mere effektivt.

Grundlæggende brug af @at-root

SASS' indlejring gør koden mere læsbar, men for dyb indlejring kan medføre, at utilsigtet CSS bliver genereret. Ved at bruge @at-root kan du udelukke bestemte kodeblokke fra indlejringsstrukturen.

Grundlæggende syntaks

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

Eksempel på brug

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

Kompileret CSS

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

• På grund af @at-root genereres .nav-item uden for .nav.

@at-root i indlejrede selektorer

Selv ved dyb indlejring lader brugen af @at-root dig flytte bestemte selektorer til rodniveau. Dette gør det muligt at generere kontrolleret CSS selv i komplekse strukturer.

Eksempel på brug

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

Kompileret CSS

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

• Ved at bruge @at-root genereres .card-title uden for .card-header.

@at-root med argumenter

Ved at angive argumenter kan @at-root styres mere fleksibelt.

without-argumentet

Når du bruger argumentet without, ignorerer outputtet de angivne scopes. Med andre ord kan du fjerne overordnede regler eller medieforespørgsler.

Eksempel på brug

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

Kompileret CSS

1.nav__item {
2  color: red;
3}

• I dette tilfælde udelukker @at-root (without: media) medieforespørgsels-scope'et, og .nav__item genereres i roden.

with-argumentet

Ved at bruge with bevares kun de angivne scopes i outputtet. Praktisk når du vil skrive ud til roden og samtidig bevare bestemte scopes.

Eksempel på brug

 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}

Kompileret CSS

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

• @at-root (with: media) flytter selektoren til roden, samtidig med at medieforespørgselsstrukturen bevares.

Angivelse af flere betingelser

Du kan også angive flere scopes på én gang, adskilt med mellemrum.

Eksempel på brug

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

Kompileret CSS

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

• I dette eksempel udelukkes både rule (almindelige selektorer) og media (medieforespørgsler), så .global-style ikke hører til noget scope og genereres helt på rodniveau. Dette er nyttigt, når du bevidst vil definere globale stilarter selv i kompleks indlejring.

Kombination med medieforespørgsler

Ved at bruge @at-root kan du generere stilarter på rodniveau indefra medieforespørgsler. Dette lader dig definere responsivt design på komponentniveau.

Eksempel på brug

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

Kompileret CSS

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

• Ved at bruge @at-root kan du også generere stilarter på rodniveau indefra medieforespørgsler. Det gør det let at definere uafhængige globale stilarter for hvert breakpoint.

Anvendelsesområder for @at-root

@at-root er praktisk, når du vil generere stilarter på rodniveau under bestemte betingelser. Det er især nyttigt, når du håndterer medieforespørgsler eller temaspecifikke stilarter inden i komponenter.

Adskillelse af komponenter og temaer

Ved at bruge @at-root kan du generere uafhængige globale klasser selv inde i medieforespørgsler. Dette gør det lettere at organisere temaer og tilstande pr. komponent.

Eksempel på brug

 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}

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

• I dette eksempel, mens du definerer stilarter for det mørke tema inde i .card, genererer @at-root en separat .card-dark-klasse. Dette gør det muligt at skifte klasser fleksibelt på tværs af forskellige temaer.

Noter

Når du bruger @at-root, skal du være opmærksom på følgende.

1. Undgå overdreven brug @at-root er kraftfuldt, men overforbrug kan udviske hensigten med din indlejring.

2. Tydeliggør hensigten At efterlade kommentarer om, hvorfor du bruger @at-root, gør det lettere for andre udviklere at forstå.

3. Vær opmærksom på konsistensen i dine scopes At flytte output til roden kan ændre afhængigheder mellem stilarter. Vær tydelig omkring, hvilke elementer det gælder for.

4. Kombinér med andre SASS-funktioner Kombination af @at-root med @mixin og @function muliggør et mere fleksibelt CSS-design.

Sammendrag

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

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video