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.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...