Innehållsblock i mixins i SASS

För att skicka ett block av stilar inuti ett mixin använder vi direktivet @content, där de nödvändiga stilarna kommer att placeras.

Låt oss titta på ett exempel:

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

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

Resultat efter kompilering:

* div #block {
	color: red; 
}

Det är viktigt att veta att om vi anger direktivet @content mer än en gång eller inuti en loop, kommer blocket med stilar att anropas lika många gånger.

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

Efter kompilering kommer vi att se:

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

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

Berätta vad som blir resultatet av kompilering av följande kod:

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

Berätta vad som blir resultatet av kompilering av följande kod:

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

Antag att du har följande mixin:

@mixin colors {
	...
}

Använd direktivet @content för att ställa in en blå teckenfärg och en vågig understrykning för alla länkar som tillhör #primary.