Content Blocks in Mixins in SASS

To pass a block of styles inside a mixin, we use the @content directive, in place of which the styles we need will be placed.

Let's look at an example:

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

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

Compilation result:

* div #block {
	color: red; 
}

It is important to know that if we specify the @content directive more than once or inside a loop, then the style block will be called the same number of times.

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

After compilation we will see:

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

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

Tell me what the result of compiling the following code will be:

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

Tell me what the result of compiling the following code will be:

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

Let's say you have the following mixin:

@mixin colors {
	...
}

Using the @content directive, set all links related to #primary to blue font color and wavy underline.