Cerrar
Image Alt

Mixins en Sass

En nuestra cuarta entrega del curso de Sass vamos a ver una de sus aportaciones más potentes: Mixins.

¿Para qué valen los Mixins?

Los Mixins te permiten reutilizar estilos (propiedades e incluso selectores) sin tener que copiarlos y pegarlos cada vez que quieres utilizarlos.

Por ejemplo, supongamos que tenemos un estilo básico para los botones de nuestra web pero tenemos luego dos colores diferentes según la ubicación del botón:

Como vemos, todo se repite salvo el color de fondo. Este es un ejemplo de repetición de código que probablemente queramos evitar en nuestra hoja .scss, y lo podemos hacer gracias a los Mixins (en el siguiente artículo veremos también otra opción para hacerlo, Extend, quizás incluso más recomendada para el caso que acabamos de ver)

Cómo crear un Mixin

Para escribir un Mixin lo hacemos escribiendo @Mixin seguido por el nombre del mismo. Por ejemplo, para el caso anterior, escribiríamos en el Mixin las propiedades que repetíamos. Y luego en cada botón incluimos el Mixin con @include:

Puntos a tener en cuenta:

  • Como regla general está bien escribir primero el @include y luego poner las propiedades singulares (como background: black;) para poder sobreescribir alguna de las que nos trae el Mixin si fuera necesario.
  • Asegúrate que el @Mixin está declarado antes de usar los @include. Por ejemplo, puedes crear un parcial (partial) que se llame _mixins.scss y lo importamos antes del resto de parciales (puedes ver qué es un parcial en Sass: Comentarios, Importaciones y Anidación)
  • @include no es lo mismo que @import. Con @include incluimos un mixin, mientras que con @import incluimos un archivo. En el mismo artículo que el punto anterior verás el uso de @import.

El resultado en CSS sería el de arriba del todo, con el que iniciamos el artículo.

Estaréis de acuerdo conmigo que el CSS generado no es muy bueno. Aunque en el archivo .scss no estábamos repitiendo código, en el archivo .css resultante sí lo estamos haciendo. Sería mucho mejor generar algo así:

Pero esto no lo podemos hacer con Mixins, sino con Extend, que veremos en el siguiente artículo. Lo que acabamos de ver sin embargo nos sirve apara ver cómo funcionan los Mixins y para qué no son útiles.

Cuándo usar los Mixins: Argumentos

El poder real de los Mixins está en que podemos pasar argumentos a los mismos. Los argumentos se declaran como una lista de variables dentro de un paréntesis. A cada una de estas variables se le asigna un valor cada vez que se usa el mixin. De esta manera no generaremos código repetido cada vez que lo usemos, ya que gracias a los argumentos podemos obtener un código singular para cada caso.

Por ejemplo, un Mixin sencillo para border-radius:

Como vemos hemos creado un Mixin llamado rounded que tiene como argumento $radio, que es el radio que se aplicará en border-radius. El CSS resultante será:

A los argumentos del mixin se les puede dar también un valor por defecto, de tal manera que si al usar el Mixin no se pasa ese argumento, se le asignará el valor por defecto.

Si queremos incluir un valor por defecto en el ejemplo anterior, haríamos:

Y ahora tendríamos para #navbar li:

El uso de Mixins es tan potente que encontraréis librerías, páginas web y artículos de blogs dedicados exclusivamente a compartir Mixins. Ejemplos (podéis encontrar más implemente buscando en Google):

Múltiples argumentos

Tal y como dijimos anteriormente, podemos pasar al mixin una lista de argumentos separados por comas:

que nos dará como resultado:

Los argumentos hay que pasarlos en el @include en el mismo orden en el que están definidos en el Mixin. Si nos falta alguno obtendremos un mensaje de error, a no ser que definamos alguno por defecto:

Debemos tener cuidado a la hora de crear la lista de argumentos, ya que los argumentos por defecto deben ir siempre al final de la cadena. Es decir, esto nos dará un error:

Si son muchos los argumentos que pasamos en nuestro Mixin nos ayudará utilizar en el @include los nombres de las variables. De esta manera podemos pasar los argumentos en el orden que queramos y además no nos equivocaremos a la hora de asignar los valores:

Argumentos variables

Hay ocasiones en los que pasar múltiples argumentos puede complicarse un poco ya que a veces nos encontramos ya comas en el propio CSS, como por ejemplo:

Si intentamos pasar este valor con comas como argumento:

Obtendremos el error:
«Mixin transition takes 1 argument but 2 were passed» (Mixin transition necesita 1 argumento pero se han pasado 2)

Al tener el valor una coma interpreta como otro argumento el contenido existente a partir de la misma. Esto lo solucionamos añadiendo tres puntos ... al final de la definición del argumento. Entonces crearemos lo que se llama un argumento variable (vararg), que nos permitirá pasar como argumento único un valor con comas.

Entonces el resultado será ahora correcto:

También podemos utilizar los Argumentos Variables en el include, de tal manera que pasamos todos los valores separados por comas en una sola variable. Por ejemplo si utilizamos un ejemplo anterior:

Como veis pasamos en un argumento variable una lista de valores separados por comas que es dividida por el Mixin. Hay que tener cuidado con el orden de los valores.

Interpolación y Mixins

Cuando hablábamos de variables en Sass nos referíamos a la interpolación. Recordemos que podemos utilizar #{$variable} para introducir variables en selectores, nombres de propiedades y cadenas de texto. Esto nos permitirá crear un código más eficiente en nuestros mixins. Por ejemplo (este ejemplo es de la propia web de Sass), si hacemos un mixin para border radius que permita redondear varias esquinas según el caso, tendríamos que escribir un mixin para cada combinación de esquinas. Gracias a la interpolación lo podemos hacer con un sólo mixin:

y obtendremos:

Bueno, eso es todo. En el próximo artículo veremos @extend, más recomendable que mixins para ciertas ocasiones (como en el caso del ejemplo con el que empezamos este artículo).

Comentarios

  • Kevin Marquez

    Excelente explicacion, para que buscar mas información si aqui esta completa…!

    18 abril, 2018
    contestar

Escribe un comentario