SASS `@at-root`

Denne artikkelen forklarer SASS’ @at-root.

Vi går gjennom alt fra grunnleggende bruk av @at-root til avanserte eksempler, trinn for trinn.

YouTube Video

Om SASS @at-root

@at-root er et direktiv fra SASS som brukes til å flytte nøstede selektorer eller egenskaper fra gjeldende nøsting til det overordnede scope-et. Ved å utnytte denne funksjonen kan du kontrollere nøstedybden og generere ønsket CSS mer effektivt.

Grunnleggende bruk av @at-root

SASS’ nøsting gjør koden mer lesbar, men for dyp nøsting kan føre til at utilsiktet CSS genereres. Ved å bruke @at-root kan du ta ut bestemte kodeblokker fra nøstestrukturen.

Grunnleggende Syntax

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

Eksempel på bruk

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

Kompilert CSS

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

• På grunn av @at-root blir .nav-item skrevet ut utenfor .nav.

@at-root i nøstede selektorer

Selv ved dyp nøsting lar @at-root deg flytte bestemte selektorer til rotnivå. Dette gjør at du kan skrive ut kontrollert CSS selv i komplekse strukturer.

Eksempel på bruk

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

Kompilert CSS

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

• Ved å bruke @at-root blir .card-title skrevet ut utenfor .card-header.

@at-root med argumenter

Ved å angi argumenter kan @at-root styres mer fleksibelt.

argumentet without

Når du bruker argumentet without, ignorerer utdataene de angitte scope-ene. Med andre ord kan du fjerne overordnede regler eller mediespørringer.

Eksempel på bruk

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

Kompilert CSS

1.nav__item {
2  color: red;
3}

• I dette tilfellet ekskluderer @at-root (without: media) scope-et for mediespørringer, og .nav__item skrives ut på rotnivå.

argumentet with

Ved å bruke with beholdes bare de angitte scope-ene i utdataene. Nyttig når du vil skrive ut på rotnivå samtidig som du bevarer bestemte scope.

Eksempel på bruk

 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}

Kompilert CSS

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

• @at-root (with: media) flytter selektoren til rotnivå samtidig som mediespørringsstrukturen bevares.

Angi flere betingelser

Du kan også spesifisere flere scopes samtidig, atskilt med mellomrom.

Eksempel på bruk

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

Kompilert CSS

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

• I dette eksemplet er både rule (vanlige selektorer) og media (mediespørringer) ekskludert, så .global-style tilhører ikke noe scope og skrives helt ut på rotnivå. Dette er nyttig når du bevisst vil definere globale stiler selv innenfor kompleks nøsting.

Kombinere med mediespørringer

Ved å bruke @at-root kan du generere stilregler på rotnivå fra inne i mediespørringer. Dette lar deg definere responsivt design på komponentnivå.

Eksempel på bruk

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

Kompilert CSS

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

• Med @at-root kan du også skrive ut stiler på rotnivå fra innenfor mediespørringer. Dette gjør det enkelt å definere uavhengige globale stiler for hvert breakpoint.

Brukstilfeller for @at-root

@at-root er praktisk når du vil skrive ut stiler på rotnivå under bestemte betingelser. Det er spesielt nyttig når du håndterer mediespørringer eller temaspesifikke stiler i komponenter.

Skille komponenter og temaer

Ved å bruke @at-root kan du generere uavhengige globale klasser selv innenfor mediespørringer. Dette gjør det enklere å organisere temaer og tilstander per komponent.

Eksempel på bruk

 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}

Kompilert 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 eksempelet, mens du definerer stiler for det mørke temaet inne i .card, genererer @at-root en egen .card-dark-klasse. Dette gjør at du kan bytte klasser fleksibelt på tvers av ulike temaer.

Notater

Når du bruker @at-root, bør du huske følgende.

1. Unngå overdreven bruk @at-root er kraftig, men overdreven bruk kan gjøre hensikten med nøstingen uklar.

2. Gjør hensikten tydelig Å legge igjen kommentarer om hvorfor du bruker @at-root gjør det enklere for andre utviklere å forstå.

3. Vær oppmerksom på konsistens i scope Å flytte utdata til rotnivå kan endre avhengigheter mellom stiler. Vær tydelig på hvilke elementer det gjelder for.

4. Kombiner med andre SASS-funksjoner Å kombinere @at-root med @mixin og @function muliggjør mer fleksibel CSS-design.

Sammendrag

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

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video