Tengo una duda sobre el funcionamiento de la directiva @content
en Sass, no me queda claro cómo funciona o cuándo usarla.
Con @content
se puede llamar a un mixin y añadirle estilos adicionales... pero realmente se puede obtener el mismo resultado sin @content
. Entonces, ¿para qué usarlo? (aunque seguro dependerá del ejemplo, porque no tendría sentido añadir una directiva "que no sirve").
Por ejemplo:
@mixin colores-alarma() {
color: #660000;
background-color: #ffdddd;
border: 2px solid #660000;
@content;
}
.mensaje-alarma {
@include colores-alarma() {
font-size: 1.2em;
}
}
Es equivalente a:
@mixin colores-alarma() {
color: #660000;
background-color: #ffdddd;
border: 2px solid #660000;
}
.mensaje-alarma {
@include colores-alarma();
font-size: 1.2em;
}
O al menos, las dos generan lo mismo:
.mensaje-alarma {
color: #660000;
background-color: #ffdddd;
border: 2px solid #660000;
font-size: 1.2em;
}
Y mi pregunta, ¿en qué casos es útil usar la directiva @content
?
use case
más común es cuando elmixin
generareglas
y dentro de estas se incluye el@content
. Te dejo este enlace con varios ejemplos.