Portée des variables et blocs de contenu dans SASS

Lors de la transmission de blocs de contenu dans un mixin, leur portée est déterminée par l'emplacement spécifique du bloc, et non par le mixin. Par conséquent, nous ne pouvons pas utiliser les variables locales du mixin dans le bloc de contenu transmis, qui ne pourra fonctionner qu'avec des variables globales.

Prenons l'exemple suivant :

$size: 14px;
	@mixin sizes ($size: 20px) {
		font-size: $size;
		padding: $size;
		@content;
}

.navbar {
	@include sizes {
		margin: $size;
	}
}

Résultat de la compilation :

.navbar {
	font-size: 20px;
	padding: 20px;
	margin: 14px; 
}

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

$color: yellow;

@mixin links ($color: red) {
	background: $color;
	@content;
}

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

$color: yellow;
$size: 10px;

@mixin links ($color: red, $size: 12px) {
	background-color: $color;
	font-size: $size;
	@content;
}

.navbar {
	@include links {
		box-shadow: $color;
		padding: $size;
	}
}

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

$color: green;
$size: 6px;

@mixin links ($color: red, $size: 10px) {
	color: $color;
	font-size: $size;
	@content;
}

.navbar {
	@include links {
		border-color: $color;
		margin: $size;
	}
}

#active{
	@include links{
		background-color: $color;
		padding-top: $size;
		padding-bottom: $size * 2;
	}
}