Le direttive in SASS esistono per semplificare un lavoro e con la direttiva @extend drguito da un selettore di richiamo formato da simbolo percentuale e da un nome, é possibile ulteriormente richiamare dei valori nelle nostre regole di stile. Abbiamo già visto in precedenza da articoli come https://umbriawayinfo.wordpress.com/2021/01/04/fondamenti-di-web-design-17-nesting-in-sass-potenza-degli-annidamenti/ , delle situazioni in cui dichiarando delle variabili potevo prendere il nome della variabile e inserirlo nella regola per esempio:
$colorselezionato:#ff9900;
$fontselezionato:verdana;
body {
color:$colorselezionato;
font-family: $fontselezionato;
}
Ora possiamo anche raggruppare meglio le informazioni tramite la direttiva @EXTEND per richiamare queste informazioni semplicemente dando il nome del selettore, vediamo un esempio. Scrivo nel file scss la seguente istruzione eliminando le dure righe $colorselezionato e $fontselezionato e inserendo al loro posto un placeholder:
%fontcolor {
color:black;
font-family:arial;
}
Ora per il body di cui sopra diventa con la direttiva applicata:
body {
@extend %fontcolor;
}
In questo modo possiamo eliminare tutte quelle proprietà come color e font-family che a video sarebbero rinondanti per sostituirle con:
@extend %fontcolor;
che é un modo elegante per richiamare con il simbolo di chiocciola (la direttiva) un segnaposto che riempirà le nostre proprietà eliminate con i contenuti del PLACEHOLDER. Da un punto di vista pratico la scrittura di codice fatta così é pulita e sintetica e come si diceva all’ inizio semplifica la leggibilità del codice.
