Vizu za Maudhui katika Michanganyiko ya SASS

Kwa kuhamisha vizu za mitindo ndani ya mchanganyiko tunatumia derectiva @content, ambapo mitindo tunayohitaji itawekwa.

Tuchunguze mfano:

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

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

Matokeo ya ukusanyaji:

* div #block {
	color: red; 
}

Ni muhimu kujua kuwa ikiwa tunataja derectiva @content zaidi ya mara moja au ndani ya kitanzi, basi vizu za mitindo zitaitwa mara nyingi sawa.

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

Baada ya ukusanyaji tutaona:

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

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

Eleza, matokeo ya ukusanyaji ya mfuatayo yatakuwa nini:

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

Eleza, matokeo ya ukusanyaji ya mfuatayo yatakuwa nini:

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

Wacha uwe na mchanganyiko ufuatao:

@mixin colors {
	...
}

Kwa kutumia derectiva @content weka rangi ya bluu ya herufi kwa viungo vyote vinavyohusiana na #primary na mstari wa chini wenye mawimbi.