- Learn
- Guida SASS
- La direttiva @extend e i placeholeder (con %)
La direttiva @extend e i placeholeder (con %)
Scrivendo il css degli elementi di una pagina può capitare che lo stile di un selettore erediti le stesse caratteristiche di un altro con l’aggiunta di alcune proprietà specifiche.
La strategia più immediata è quella di duplicare le proprietà in entrambi i selettori.
Un’altra strategia possibile potrebbe essere quella di definire una classe generale e una classe più specifica e marcare i tag HTML con entrambe le classi.
SASS ci mette a disposizione una soluzione migliore che semplifica il lavoro e genera un codice più efficiente e manutenibile.
La direttiva @extend permette di indicare al compilatore che una classe eredita tutte le proprietà di un’altra precedentemente definita.
Prendiamo ad esempio una classe .box
che definisce il bordo e il colore di sfondo di un tag div
.
Vogliamo poi creare una classe che oltre alle sopracitate proprietà definisca anche il font-size
. Il seguente codice:
.box {
border: 1px solid #000;
background-color: green;
}
.mybox {
@extend .box;
font-size: 10px;
}
sarà compilato in questo modo:
.box, .mybox {
border: 1px solid #000;
background-color: green;
}
.mybox {
font-size: 10px;
}
I placeholder e la keyword %
In alcuni casi può essere utile definire una classe che ha il solo scopo di essere estesa. Per fare ciò possiamo utilizzare dei particolari selettori SASS chiamati placeholder che permettono di definire uno stile che non verrà stampato nel css ma potrà essere solamente esteso.
Per definire un placeholder dobbiamo utilizzare la keyword percentuale (%).
Il codice:
%box {
border: 1px solid #000;
background-color: green;
}
.myfirstbox {
@extend %box;
font-size: 10px;
}
.mysecondbox {
@extend .box;
font-size: 20px;
}
darà come risultato:
.myfirstbox, .mysecondbox {
border: 1px solid #000;
background-color: green;
}
.myfirstbox {
font-size: 10px;
}
.mysecondbox {
font-size: 20px;
}
Se vuoi aggiornamenti su CSS inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Creare un Indice automatico con LibreOffice
In questo tutorial vedremo come creare un Indice in modo del tutto automatico utilizzando il noto programma di scrittura open-source […]