Indholdsblokke i mixins i SASS

For at overføre en blok af stile inde i et mixin bruger vi direktivet @content, hvor de nødvendige stile vil blive placeret.

Lad os se på et eksempel:

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

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

Kompileringsresultat:

* div #block {
	color: red; 
}

Det er vigtigt at vide, at hvis vi angiver direktivet @content mere end én gang eller inde i en løkke, så vil blokken af stile også blive kaldt lige så mange gange.

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

Efter kompilering vil vi se:

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

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

Forklar, hvad resultatet af kompileringen af følgende kode vil være:

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

Forklar, hvad resultatet af kompileringen af følgende kode vil være:

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

Antag, at du har følgende mixin:

@mixin colors {
	...
}

Ved at bruge direktivet @content sæt blå skriftfarve og bølget understregning for alle links, der relaterer sig til #primary.