Блокі кантэнту ў міксінах у 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 сіні колер шрыфту і хвалістае падкрэсліванне.