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;
}