Блокове съдържание в миксини в 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.