Altro su Sass: @extend vs @include

SASS è un pre-processore CSS: una volta compilato il file, genererà un file CSS che potrà poi essere utilizzato nella nostra applicazione web.

Poiché Sass vi offre la possibilità di nidificare i selettori, e si sa che avere il vostro codice incapsulato è il "buon modo per evitare collisioni con altri stili", ci si potrebbe trovare a imitare il DOM nel Sass; è  una pessima idea: produrrebbe un Css mostruoso, enorme e non mantenibile: infatti ogni cambiamento nel DOM dovrebbe riflettersi nel Sass e viceversa: inoltre gli stili sarebbero così legati agli elementi del DOM che tanto varrebbe scriverli in linea come si faceva prima del Css.

Per questo sarebbe meglio seguire la regola di non andare mai sopra i 4 “innesti”:

Ossia la Regola Inception : non andare più di quattro livelli di profondità.

Contesto Sito

Se stai stylando qualcosa che manca completamente di classi o id, allora è probabile che si abbia bisogno di al massimo un solo livello.

Buoni esempi di questo sarebbe lo stile di default di h1.

Contesto della Pagina  (layout, larghezza della barra laterale, altezze)

Se stai stylando il layout (barra laterale e contenuti dimensioni, elementi che variano a seconda della pagina) allora stai parlando di contesto della pagina.

Di solito avrete bisogno di almeno due livelli di rientro per raggiungere questo obiettivo. Tuttavia, ricordate che si dovrebbe assegnare solo stili a cose che cambiano sulla base della pagina e non gli oggetti stessi.

• Separare la struttura e la presentazione: Si consiglia di mantenere la struttura e il posizionamento in un oggetto di base e le caratteristiche visive (come background o border in classi a parte, da estendere. In questo modo non sarà mai necessario sovrascrivere proprietà visive.

• Contenitore separato e contenuti: Non imitare la struttura del codice HTML in CSS. Cercare di creare e applicare classi che descrivono l'uso del tag in questione. E mantenere classi nidificate al minimo.

/ * Il modo cattivo * /


.box-1 {
  border: 1px solid #ccc;
  width: 200px;
  height: 200px;
  border-radius: 10px;
}
.box-2 {
  border: 1px solid #ccc;
  width: 120px;
  height: 120px
  border-radius: 10px;
}

Se si guarda attentamente si noterà che stiamo ripetendo alcuni pezzi pregiati di informazioni. In questo caso, gli stili di confine sono duplicati in entrambe le definizioni di classe. Quindi, se dovessimo cambiare le proprietà del border avremmo bisogno di controllare tutti i luoghi in cui abbiamo usato questa combinazione di proprietà.

Per risolvere questo problema, si dovrebbero astrarre le proprietà visive in un'altra classe.

.box-1 {
  width: 200px;
  height: 200px;
}
.box-2 {
  width: 120px;
  height: 120px;
}
.box-border{
  border: 1px solid #CCC;
  border-radius: 10px;
}

 

Altro esempio, usando Sass

/* The bad way */
a.twitter {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
  background: #55acee
  color: #fff;
}
span.facebook {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
  background: #3b5998;
  color: #fff;
}

che diventa:

/* The best way */

%button {
  min-width: 100px;
  padding: 1em;
  border-radius: 1em;
}
%twitter-background {
  color: #fff;
  background: #55acee;
}
%facebook-background {
  color: #fff;
  background: #3b5998;
}

.btn {
  &--twitter {
    @extend %button;
    @extend %twitter-background;
  }
  &--facebook {
    @extend %button;
    @extend %facebook-background;
  }
}

L’html sarà così:

 

<a href="#" class="btn--twitter">Twitter</a>
<a href="#" class="btn--facebook">Facebook</a>

 

La proprietà @extend estende le proprietà dell’elemento che segue: il % invece caratterizza un selettore di tipo PLACEHOLDER:

I selettori PLACEHOLDER (segnaposto) hanno la proprietà di non venire visualizzati nel CSS generato: solo i selettori che li estendono saranno inclusi nell'output.

Extend ( PLACEHOLDER  )  vs. include ( MIXINS )

A prima vista può apparire come i selettori PLACEHOLDER siano dei MIXINS senza parametri. Mentre questo è quasi vero dal punto di vista funzionale (con risultati quasi identici nel browser), il CSS che viene generato differisce drasticamente.

le direttive @extend @include  sono entrambe caratteristiche molto potenti, con alcune sottili differenze.

Quando ci si avvicina un problema di riutilizzo dello stile può essere utile chiedersi se il CSS generato è importante per voi.

In alcuni casi, l’ @extend può semplificare notevolmente la produzione e migliorare in modo significativo le prestazioni del vostro CSS.