Blocos de conteúdo em mixins no SASS

Para passar um bloco de estilos dentro de um mixin, usamos a diretiva @content, no lugar da qual os estilos que precisamos serão inseridos.

Vamos considerar um exemplo:

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

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

Resultado da compilação:

* div #block {
	color: red; 
}

É importante saber que se especificarmos a diretiva @content mais de uma vez ou dentro de um loop, o bloco de estilos será chamado o mesmo número de vezes.

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

Após a compilação, veremos:

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

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

Explique qual será o resultado da compilação do seguinte código:

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

Explique qual será o resultado da compilação do seguinte código:

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

Suponha que você tenha o seguinte mixin:

@mixin colors {
	...
}

Usando a diretiva @content, defina para todos os links pertencentes a #primary a cor da fonte como azul e sublinhado ondulado.