Blloqet e përmbajtjes në miksinat në SASS

Për transmetimin e bllokut të stileve brenda miksinit përdorim direktivën @content, në vend të së cilës do të vendosen stilet që na duhen.

Le të shqyrtojmë një shembull:

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

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

Rezultati i kompilimit:

* div #block {
	color: red; 
}

Është e nevojshme të dihet se nëse ne specifikojmë direktivën @content më shumë se një herë ose brenda një cikli, atëherë po aq herë do të thirret dhe blloku i stileve.

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

Pas kompilimit do të shohim:

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

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

Tregoni, çfarë do të jetë rezultati i kompilimit të kodit në vijim:

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

Tregoni, çfarë do të jetë rezultati i kompilimit të kodit në vijim:

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

Le të keni miksinin e mëposhtëm:

@mixin colors {
	...
}

Duke përdorur direktivën @content vendosni për të gjitha lidhjet që i referohen #primary ngjyrën e fontit blu dhe nënvizimin me valë.