Inhoudsblokken in mixins in SASS

Om een blok stijlen door te geven binnen een mixin gebruiken we de directive @content, op de plaats waarvan de gewenste stijlen komen te staan.

Laten we een voorbeeld bekijken:

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

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

Resultaat van compilatie:

* div #block {
	color: red; 
}

Het is belangrijk om te weten dat als we de directive @content meer dan één keer specificeren of binnen een lus, het blok stijlen even vaak wordt aangeroepen.

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

Na compilatie zien we:

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

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

Vertel wat het resultaat van de compilatie van de volgende code zal zijn:

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

Vertel wat het resultaat van de compilatie van de volgende code zal zijn:

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

Stel je hebt de volgende mixin:

@mixin colors {
	...
}

Gebruik de directive @content om voor alle links die betrekking hebben op #primary een blauwe tekstkleur en een golvende onderstreping in te stellen.