SASS `@at-root`

Questo articolo spiega @at-root di SASS.

Tratteremo tutto, dall'uso di base di @at-root fino a esempi avanzati, passo dopo passo.

YouTube Video

Informazioni su @at-root di SASS

@at-root è una direttiva fornita da SASS che serve a spostare selettori o proprietà annidati dall'annidamento corrente all'ambito padre. Sfruttando questa funzionalità, puoi controllare la profondità dell'annidamento e generare il CSS desiderato in modo più efficiente.

Uso di base di @at-root

L'annidamento di SASS rende il codice più leggibile, ma un annidamento troppo profondo può generare CSS indesiderato. Usando @at-root, puoi escludere specifici blocchi di codice dalla struttura di annidamento.

Sintassi di Base

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

Esempio di utilizzo

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

CSS compilato

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

• Grazie a @at-root, .nav-item viene generato al di fuori di .nav.

@at-root nei selettori annidati

Anche con un annidamento profondo, l'uso di @at-root permette di spostare selettori specifici al livello radice. Questo consente di produrre CSS controllato anche all'interno di strutture complesse.

Esempio di utilizzo

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

CSS compilato

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

• Usando @at-root, .card-title viene generato al di fuori di .card-header.

@at-root con argomenti

Specificando degli argomenti, @at-root può essere controllato in modo più flessibile.

argomento without

Quando utilizzi l'argomento without, l'output ignora gli ambiti specificati. In altre parole, puoi rimuovere le regole padre o le media query.

Esempio di utilizzo

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

CSS compilato

1.nav__item {
2  color: red;
3}

• In questo caso, @at-root (without: media) esclude l'ambito della media query e .nav__item viene generato alla radice.

argomento with

Usare with mantiene nell'output solo gli ambiti specificati. Utile quando vuoi generare alla radice preservando ambiti specifici.

Esempio di utilizzo

 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 compilato

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

• @at-root (with: media) sposta il selettore alla radice preservando la struttura della media query.

Specificare più condizioni

È anche possibile specificare più ambiti contemporaneamente, separati da spazi.

Esempio di utilizzo

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

CSS compilato

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

• In questo esempio, sia rule (selettori normali) sia media (media query) sono esclusi, quindi .global-style non appartiene ad alcun ambito ed è generato interamente al livello radice. Questo è utile quando vuoi definire intenzionalmente stili globali anche in presenza di annidamenti complessi.

Combinare con le media query

Usando @at-root, è possibile generare stili a livello radice dall'interno delle media query. Questo consente di definire il design responsive a livello di componente.

Esempio di utilizzo

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

CSS compilato

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

• Usando @at-root, puoi generare stili a livello radice anche dall'interno delle media query. Questo rende facile definire stili globali indipendenti per ciascun breakpoint.

Casi d'uso di @at-root

@at-root è utile quando vuoi generare stili a livello radice in determinate condizioni. È particolarmente utile quando si gestiscono media query o stili specifici del tema all'interno dei componenti.

Separare componenti e temi

Usando @at-root, puoi generare classi globali indipendenti anche dall'interno delle media query. Questo facilita l'organizzazione di temi e stati per componente.

Esempio di utilizzo

 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 compilato

 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 questo esempio, mentre si definiscono gli stili per il tema scuro all'interno di .card, @at-root genera una classe .card-dark separata. Questo consente di gestire le classi in modo flessibile tra temi diversi.

Note

Quando usi @at-root, tieni presenti i seguenti punti.

1. Evita l'uso eccessivo @at-root è potente, ma abusarne può offuscare l'intento del tuo annidamento.

2. Chiarisci l'intento Lasciare commenti sul perché stai usando @at-root facilita la comprensione agli altri sviluppatori.

3. Presta attenzione alla coerenza degli ambiti Spostare l'output alla radice può cambiare le dipendenze degli stili. Sii chiaro su quali elementi si applica.

4. Combina con altre funzionalità di SASS Combinare @at-root con @mixin e @function consente un design CSS più flessibile.

Riepilogo

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

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video