Bereik van variabelen en content blocks in SASS

Bij het doorgeven van content blocks aan een mixin wordt hun bereik bepaald door de specifieke locatie van het block, niet door de mixin. Daarom kunnen we geen gebruik maken van lokale variabelen van de mixin in het doorgegeven content block, dat alleen zal werken met globale variabelen.

Laten we het volgende voorbeeld bekijken:

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

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

Compilatieresultaat:

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

Vertel wat het compilatieresultaat zal zijn van de volgende code:

$color: yellow;

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

Vertel wat het compilatieresultaat zal zijn van de volgende code:

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

Vertel wat het compilatieresultaat zal zijn van de volgende code:

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