Entendiendo la Directiva @mixin en Sass

La directiva @mixin es una característica potente y útil de Sass, un lenguaje de hoja de estilos precompilado. Esta directiva es usada para definir estilos que pueden ser reutilizados a lo largo de múltiples bloques de código en nuestras hojas de estilo.

Al usar Sass, a menudo necesitamos estilizar múltiples elementos de la misma manera. Aquí es donde las directivas @mixin se vuelven útiles, ya que nos permiten crear bloques de código reutilizables (mixins), que podemos incluir en nuestras hojas de estilo cuando sea necesario.

Por ejemplo, podríamos tener un mixin de esquinas redondeadas que queremos aplicar a varios elementos:

@mixin rounded-corners {
    border-radius: 10px;
}

Para usar este mixin, utilizaríamos la directiva @include seguida del nombre del mixin rounded-corners:

.button {
    @include rounded-corners;
}

Este código posteriormente se compilará en CSS puro de la siguiente manera:

.button {
    border-radius: 10px;
}

Esto nos ahorra escribir el mismo bloque de código una y otra vez, aportando mayor eficiencia y mantenibilidad a nuestras hojas de estilo.

Es importante mencionar que, aunque @include, @extend y @debug son también directivas de Sass, no se utilizan para especificar mixins. @include se utiliza para incluir un mixin, @extend para heredar estilos de otro selector y @debug para imprimir el valor de una expresión Sass en la consola de Sass. La única directiva para especificar un mixin es @mixin.