Blocuri de conținut în mixin-uri în SASS

Pentru a transmite un bloc de stiluri în interiorul unui mixin folosim directiva @content, în locul căreia vor fi plasate stilurile de care avem nevoie.

Să analizăm un exemplu:

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

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

Rezultatul compilării:

* div #block {
	color: red; 
}

Este important de știut că dacă specificăm directiva @content de mai multe ori sau în interiorul unei bucle, atunci blocul de stiluri va fi apelat de același număr de ori.

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

După compilare vom vedea:

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

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

Spuneți care va fi rezultatul compilării următorului cod:

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

Spuneți care va fi rezultatul compilării următorului cod:

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

Să presupunem că aveți următorul mixin:

@mixin colors {
	...
}

Folosind directiva @content setați pentru toate link-urile care se referă la #primary culoarea fontului albastru și subliniere ondulată.