Mixins e inclusiones

Un mixin de Sass es un bloque reutilizable de declaraciones CSS. A diferencia de una clase normal, puede aceptar parámetros, por lo que es más flexible que copiar y pegar. Se define con @mixin y se usa con @include.

Un mixin sin parámetros es simplemente un bloque reutilizable:

Pase valores a un mixin para personalizar su salida:

Establezca valores predeterminados para los argumentos de un mixin, de modo que sean opcionales:

Pase los argumentos del mixin por nombre para mejorar la claridad:

Los mixins pueden aceptar un bloque de contenido mediante @content. El bloque incluido se inserta donde aparece @content:

Un mixin habitual para las consultas de medios:

Un mixin de estilos de texto para mantener una escala tipográfica coherente:

Los mixins generan declaraciones CSS; las funciones devuelven un valor. Use un mixin cuando quiera generar varias reglas CSS y una función cuando necesite calcular un único valor.

Demasiados mixins crean una indirección abstracta difícil de depurar. Cree un mixin solo si un patrón se reutiliza 3 o más veces. Para estilos puntuales, escriba directamente el CSS.

¿Cuál es el propósito de @content dentro de la definición de un mixin de Sass?

Defina mixins con @mixin y úselos con @include. Los mixins aceptan parámetros con valores predeterminados opcionales. @content permite que quienes llaman al mixin inserten bloques CSS en él, lo que posibilita patrones envolventes como los auxiliares para consultas de medios. Cree mixins únicamente para patrones que se reutilicen varias veces, a fin de evitar el coste adicional de las abstracciones.