Inhaltsblöcke in Mixins in SASS

Um einen Block von Stilen innerhalb eines Mixins zu übergeben, verwenden wir die Direktive @content, an deren Stelle die gewünschten Stile eingefügt werden.

Betrachten wir ein Beispiel:

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

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

Ergebnis der Kompilierung:

* div #block {
	color: red; 
}

Es ist wichtig zu wissen, dass wenn wir die Direktive @content mehr als einmal oder innerhalb einer Schleife angeben, der Block mit Stilen genauso oft aufgerufen wird.

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

Nach der Kompilierung sehen wir:

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

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

Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussehen wird:

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

Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussehen wird:

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

Angenommen, Sie haben das folgende Mixin:

@mixin colors {
	...
}

Verwenden Sie die Direktive @content, um für alle Links, die zu #primary gehören, eine blaue Schriftfarbe und eine wellenförmige Unterstreichung festzulegen.