Tartalomblokkok mixinekben SASS-ban

A stílusok blokkjainak mixinen belüli továbbításához a @content direktívát használjuk, amelynek helyére a szükséges stílusok kerülnek.

Nézzünk egy példát:

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

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

A fordítás eredménye:

* div #block {
	color: red; 
}

Fontos tudni, hogy ha a @content direktívát egynél többször vagy egy cikluson belül adjuk meg, akkor a stílusblokk is ugyanannyiszor hívódik meg.

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

A fordítás után ezt látjuk:

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

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

Mondd el, mi lesz a következő kód fordítási eredménye:

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

Mondd el, mi lesz a következő kód fordítási eredménye:

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

Legyen a következő mixined:

@mixin colors {
	...
}

A @content direktíva használatával állítsa be az összes, a #primary-hoz tartozó link betűszínét kékre és hullámos aláhúzást.