Blocs de contenu dans les mixins SASS

Pour transmettre un bloc de styles à l'intérieur d'un mixin, nous utilisons la directive @content, à la place de laquelle les styles dont nous avons besoin seront insérés.

Prenons un exemple :

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

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

Résultat de la compilation :

* div #block {
	color: red; 
}

Il est important de savoir que si nous spécifions la directive @content plus d'une fois ou à l'intérieur d'une boucle, alors le bloc de styles sera appelé autant de fois.

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

Après compilation, nous verrons :

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

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

Expliquez quel sera le résultat de la compilation du code suivant :

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

Expliquez quel sera le résultat de la compilation du code suivant :

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

Supposons que vous ayez le mixin suivant :

@mixin colors {
	...
}

En utilisant la directive @content, définissez pour tous les liens appartenant à #primary une couleur de police bleue et un soulignement ondulé.