Блокови на содржина во миксините во SASS

За пренос на блок на стилови внатре во миксин користиме директива @content, на местото на која ќе стои потребниот стил.

Да разгледаме пример:

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

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

Резултат на компајлација:

* div #block {
	color: red; 
}

Потребно е да знаете дека ако ја наведеме директивата @content повеќе од еден пат или внатре во циклус, тогаш исто толку пати ќе се повикува и блокот на стилови.

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

По компајлација ќе видиме:

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

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

Кажете, каков ќе биде резултатот на компајлација на следниот код:

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

Кажете, каков ќе биде резултатот на компајлација на следниот код:

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

Нека имате следен миксин:

@mixin colors {
	...
}

Користејќи ја директивата @content поставете сина боја на фонтот и брановидно подвлекување за сите врски што се однесуваат на #primary.