Blocchi di contenuto nei mixin in SASS

Per passare un blocco di stili all'interno di un mixin utilizziamo la direttiva @content, al posto della quale verranno inseriti gli stili di cui abbiamo bisogno.

Consideriamo un esempio:

@mixin active {
	* div {
		@content;
	}
}

@include active {
	#block {
		color: red;
	}
}

Risultato della compilazione:

* div #block {
	color: red; 
}

È importante sapere che se specifichiamo la direttiva @content più di una volta o all'interno di un ciclo, il blocco di stili verrà richiamato lo stesso numero di volte.

@mixin active {
	div {
		@content;
	}
navbar {
		@content;
	}
}
@include active {
	#block {
		color: red;
	}
	button {
		color:green;
	}
}

Dopo la compilazione vedremo:

div #block {
	color: red; 
}
div button {
	color: green; 
}

navbar #block {
	color: red; 
}
navbar button {
	color: green; 
}

Descrivete quale sarà il risultato della compilazione del seguente codice:

@mixin super-link {
	a {
		@content;
	}
}
@include super-link {
	color: blue;
	text-decoration: underline;
}

Descrivete quale sarà il risultato della compilazione del seguente codice:

@mixin super-link {
	a {
		@content;
	}
	a .primary-link{
		@content;
		font-weight: bold;
	}
}
@include super-link {
	color: blue;
	text-decoration: underline;
}

Supponiamo di avere il seguente mixin:

@mixin colors {
	...
}

Utilizzando la direttiva @content impostate per tutti i link relativi a #primary un colore del testo blu e una sottolineatura ondulata.