Geltungsbereich von Variablen und Inhaltsblöcken in SASS

Bei der Übergabe von Inhaltsblöcken an einen Mixin wird ihr Geltungsbereich durch die konkrete Position des Blocks bestimmt, nicht durch die des Mixins. Daher können wir keine lokalen Variablen des Mixins in dem übergebenen Inhaltsblock verwenden, der nur mit globalen Variablen arbeiten kann.

Betrachten wir das folgende Beispiel:

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

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

Ergebnis der Kompilierung:

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

Erklären Sie, was das Ergebnis der Kompilierung des folgenden Codes sein wird:

$color: yellow;

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

Erklären Sie, was das Ergebnis der Kompilierung des folgenden Codes sein wird:

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

Erklären Sie, was das Ergebnis der Kompilierung des folgenden Codes sein wird:

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