sass
annidamento

Nesting di base

Ogni volta che dichiari una nuova regola all'interno di un'altra regola, si chiama nidificazione. Con il nesting di base, come mostrato di seguito, il selettore annidato verrà compilato come un nuovo selettore CSS con tutti i suoi genitori preposti, separati da uno spazio.

// SCSS
.parent {
  margin: 1rem;

  .child {
    float: left;
  }
}

// CSS output
.parent {
  margin: 1rem;
}

.parent .child {
  float: left;
}

Profondità di annidamento

La nidificazione è una funzionalità molto potente, ma dovrebbe essere utilizzata con cautela. Può accadere abbastanza facilmente e rapidamente, che inizi a nidificare e continui a includere tutti i bambini in un nido, in un nido, in un nido. Lasciami dimostrare:

// SCSS
header {
  // [css-rules]

  .holder {
    // [css-rules]

    .dropdown-list {
      // [css-rules]

      ul {
        // [css-rules]

        li {
          margin: 1rem 0 0 1rem;
        }
      }
    }
  }
}

// CSS output of the last rule
header .holder .dropdown-list ul li {
  margin: 1rem 0 0 1rem;
}

I problemi

Specificità

Il li dell'esempio precedente ha un margin impostato. Diciamo che vogliamo sovrascrivere questo in una query multimediale in seguito.

@media (max-width: 480) {

  // will not work
  .dropdown-list ul li {
    margin: 0;
  }

  // will work
  header .holder .dropdown-list ul li {
    margin: 0;
  }
}

Quindi, annidando troppo in profondità di conseguenza, dovrai nidificare di nuovo in profondità ogni volta che desideri sovrascrivere un determinato valore. Ancora peggio, questo è spesso il punto in cui la regola !important

@media (max-width: 480) {

  // BIG NO-NO, don't do this
  .dropdown-list ul li {
    margin: 0 !important;
  }

Perché la cosa !important è una cattiva idea

Dovresti scrivere il tuo SCSS in modo che questi metodi non siano nemmeno necessari in primo luogo. L'uso di !important su un problema così piccolo ti porterà già in una tana di coniglio!

riutilizzabilità

Questo è abbastanza simile al problema di specificità, ma vale la pena indicarlo separatamente. Se stili qualcosa come un pulsante o anche un menu a discesa, potresti voler riutilizzare questi stili da qualche altra parte sulla tua pagina.

Nesting troppo profondamente i tuoi stili sono legati solo agli elementi che si trovano all'interno del genitore più esterno (l'elemento nella parte superiore del tuo SCSS). Questo ti porta a copiare stili e incollarli altrove. Forse in un'altra regola nidificata.

I tuoi fogli di stile diventeranno sempre più grandi e più difficili da mantenere.

Quanto profondo dovresti nidificare?

La maggior parte degli styleguides imposta la profondità massima su 2. Questo è un buon consiglio in generale, poiché ci sono solo pochissime occasioni in cui vorresti nidificare più a fondo. La maggior parte delle volte, 2 è sufficiente.

Annidamento con @ at-root

L'annidamento è probabilmente il più usato per creare selettori più specifici, ma può anche essere usato semplicemente per l'organizzazione del codice. Usando la direttiva @at-root , puoi "saltare fuori" da dove lo annidi nel tuo Sass, riportandoti al livello più alto. Ciò consente di mantenere raggruppati gli stili senza creare più specificità del necessario.

Ad esempio, potresti fare qualcosa del genere:

.item {
    color: #333;

    @at-root {
        .item-wrapper {
            color: #666;

            img {
                width: 100%;
            }
        }
    }
    
    .item-child {
        background-color: #555;
    }
}

Quello sarebbe compilare a questo:

.item {
  color: #333;
}
.item-wrapper {
  color: #666;
}
.item-wrapper img {
  width: 100%;
}
.item .item-child {
  background-color: #555;
}

In questo modo, tutti i nostri stili relativi alla classe .item sono insieme in SCSS, ma non necessariamente abbiamo bisogno di quella classe in ogni selettore.

Esclusi i contesti

Le dichiarazioni di default all'interno di @at-root appariranno in qualsiasi contesto. Ciò significa che le regole all'interno di un blocco @media rimarranno lì.

@media print {
  .item-wrapper {
    @at-root {
      .item {
        background: white;
      }
    }
  }
}

// Will compile to
@media print {
  .item {
    background: white;
  }
}

Questo comportamento non è sempre desiderato, quindi è possibile escludere il contesto multimediale, passando il media all'opzione without la direttiva @at-root .

@at-root (without: media) {..

Per ulteriori informazioni, consultare la documentazione ufficiale

Il selettore genitore (&)

L'annidamento è ottimo per tenere insieme i selettori correlati per facilitare la comprensione del codice da parte degli sviluppatori futuri. Il selettore genitore, rappresentato da una e commerciale ("&") può aiutare a farlo in situazioni più complesse. Ci sono diversi modi in cui può essere usato.

Crea un nuovo selettore che richiede sia il selettore genitore che un altro sullo stesso elemento posizionando il nuovo selettore direttamente dopo il selettore genitore.

// SCSS
.parent {

  &.skin {
    background: pink;
  }
}

// CSS output
.parent.skin {
  background: pink;
}

Il genitore appare dopo un selettore annidato nel CSS compilato posizionando il selettore genitore dopo il selettore annidato.

// SCSS
.parent {

  .wrapper & {
    border: 1px solid black;
  }
}

// CSS output
.wrapper .parent {
  border: 1px solid black;
}

Stati e pseudo-elementi

Oltre ad usare il nesting per classi e bambini, il nesting con il selettore genitore è anche comunemente usato per combinare gli stati di :active :hover e :focus per i collegamenti.

// SCSS
a {
  color: blue;

  &:active,
  &:focus {
    color: red;
  }

  &:visited {
    color: purple;
  }
}

// CSS output
a {
  color: blue;
}

a:active,
a:focus {
  color: red;
}

a:visited {
  color: purple;
}

Allo stesso modo, puoi pseudo-elementi di stile nidificando con il selettore genitore.

// SCSS
.parent {

  &::after {
    display: table;
    clear: both;
    content: '';
  }

  &::only-child {
    font-weight: bold;
  }
}

// CSS output
.parent::after {
  display: table;
  clear: both;
  content: '';
}

.parent::only-child {
  font-weight: bold;
}

Proprietà di nidificazione

Alcune proprietà CSS appartengono a uno spazio dei nomi, ad esempio border-right appartiene al namespace border . Per scrivere meno, possiamo utilizzare la nidificazione delle proprietà e saltare questi prefissi, anche su più livelli.

Se dovessimo creare un bordo a destra e a sinistra di una classe chiamata .borders potremmo scrivere questo:

 //SCSS
 .borders {
    border: 2px dashed blue;
    border: {
        left: 1px solid black;
        right: 1px solid red;
    }
  }

 // CSS output 
 .borders {
    border: 2px dashed blue;  
    border-left: 1px solid black;
    border-right: 1px solid red;
  }
 

Questo ci risparmia dover scrivere border-right e border-left , tuttavia stiamo ancora scrivendo codice ripetitivo con le linee 1px solid black e 1px solid red . Possiamo scrivere CSS meno ripetitivi con il seguente:

// SCSS
.borders {
  border: 2px dashed blue {
    left: 1px solid black;
    right: {
      color: red;
    }
  }
}

// CSS output
.borders {
   border: 2px dashed blue;
   border-left: 1px solid black;
   border-right-color: red;
}