Inhoudblokke in mengsels in SASS

Om 'n blok style binne 'n mengsel oor te dra, gebruik ons die @content direkteif, waar die benodigde style geplaas sal word.

Kom ons kyk na 'n voorbeeld:

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

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

Kompilasieresultaat:

* div #block {
	color: red; 
}

Dit is belangrik om te weet dat as ons die @content direkteif meer as een keer of binne 'n lus spesifiseer, dan sal die stylblok net soveel keer uitgevoer word.

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

Na kompilasie sal ons die volgende sien:

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

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

Verduidelik wat die resultaat van die kompilasie van die volgende kode sal wees:

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

Verduidelik wat die resultaat van die kompilasie van die volgende kode sal wees:

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

Gestel jy het die volgende mengsel:

@mixin colors {
	...
}

Gebruik die @content direkteif om vir alle skakels wat behoort aan #primary 'n blou fontkleur en 'n golfliende-onderstreping in te stel.