Bloques de contenido en mixins en SASS

Para pasar un bloque de estilos dentro de un mixin usamos la directiva @content, en cuyo lugar se colocarán los estilos que necesitamos.

Consideremos un ejemplo:

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

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

Resultado de la compilación:

* div #block {
	color: red; 
}

Es necesario saber que si indicamos la directiva @content más de una vez o dentro de un ciclo, el bloque de estilos se llamará la misma cantidad de veces.

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

Después de la compilación veremos:

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

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

Explique, cuál será el resultado de la compilación del siguiente código:

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

Explique, cuál será el resultado de la compilación del siguiente código:

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

Supongamos que tiene el siguiente mixin:

@mixin colors {
	...
}

Usando la directiva @content establezca para todos los enlaces, pertenecientes a #primary, el color de fuente azul y un subrayado ondulado.