Ámbito de variables y bloques de contenido en SASS

Al pasar bloques de contenido a un mixin, su ámbito se determina por la ubicación específica del bloque, no del mixin. Por lo tanto, no podemos usar variables locales del mixin en el bloque de contenido pasado, que solo podrá funcionar con variables globales.

Consideremos el siguiente ejemplo:

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

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

Resultado de la compilación:

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

Explica cuál será el resultado de la compilación del siguiente código:

$color: yellow;

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

Explica cuál será el resultado de la compilación del siguiente código:

$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;
	}
}

Explica cuál será el resultado de la compilación del siguiente código:

$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;
	}
}