A volte la direttiva @extend non è sufficiente a garantire l’automazione di particolari porzioni del nostro foglio di stile, basti pensare a tutti in quei casi nei quali dovremmo replicare la stessa struttura generale con alcune piccole, ma significative, variazioni.

Esprimiamo meglio questo concetto con un esempio, supponiamo di aver disegnato un <button> come quello seguente:

Nell’esaminare il codice CSS necessario, notiamo come, per ottenere l’effetto desiderato, il colore principale dell’elemento debba essere ripetuto in diverse proprietà: background, outline, box-shadow e lo stesso color in caso il mouse si sovrapponga all’elemento:

.button
{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none; !
	padding: 10px 20px;
	display: inline-block;
	text-transform: uppercase; !
	background: blue;
	outline: 1px solid blue;
	box-shadow: 0 0 10px blue;
	color: white;
	border: 1px solid white;
	&:hover {
		color: blue;
		background: white;
		box-shadow: none;
	}
}
button {
	@extend .button;
}

Ora supponiamo di dover produrre per lo stesso progetto una variazione del pulsante precedente dove il colore principale sia il verde. Certo, potremmo utilizzare la direttiva @extend, ma il risultato sarebbe piuttosto confuso e poco elegante considerato il numero di proprietà da alterare:

button.green
{
	@extend .button;
	background: green;
	outline: 1px solid green;
	box-shadow: 0 0 10px green;
	&:hover{
		color: green;
	}
}

La direttiva @mixin

Casi come questi sono perfetti per essere risolti con l’utilizzo dei @mixin, questa potente direttiva, che sarà il fulcro dell’intera lezione, consente infatti di creare gruppi di selettori e proprietà CSS ripetibili all’interno del nostro fogli di stile su cui possiamo applicare dei parametri arbitrari, proprio come dovessimo invocare una funzione alla quale passare un set di argomenti.

Con questo nuovo strumento nella nostra cassetta degli attrezzi proviamo a riscrivere l’esempio precedente (provalo online):

@mixin baseButton($bgColor)
{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 10px 20px;
	display: inline-block;
	text-transform: uppercase;
	background: $bgColor;
	outline: 1px solid $bgColor;
	box-shadow: 0 0 10px $bgColor;
	color: white;
	border: 1px solid white;
	&:hover {
		color: $bgColor;
		background: white;
		box-shadow: none;
	}
}
button.green{
	@include baseButton(green);
} 
button.red{
	@include baseButton(red);
}

Comodo, e decisamente più elegante! $bgColor è una vera e propria variabile, utilizzata all’interno delle singole proprietà e pilotata attraverso l’argomento passato durante l’invocazione al @mixin.

Nella lezione che segue esamineremo meglio i tipi di variabile in SASS, che ci consentiranno di lavorare in modo ancora più flessibile.