Mixins en SASS

Los mixins son herramientas que proveen los preprocesadores CSS, aunque no son funciones se pueden percibir como tal, y su principal utilidad es reutilizar código.

En mas de una ocasión hemos tenido la necesidad de crear múltiples clases que hacen lo mismo pero cambian en un solo valor, ejemplo múltiples clases para el font-size.

.fs-10 {
  font-size: 10px;
}
.fs-20 {
  font-size: 20px;
}
.fs-30 {
  font-size: 30px;
}

Si nos fijamos, lo único que cambia en este escenario es el numero tanto para nombrar la clase como para setear el valor del font-size, usado un mixin podemos crear una función que cree este código para nosotros de forma automática.

Ejemplo:

// Esto es un mapa, lo que conocemos como un objeto en JavaScript
$sizes: (
  "10": "10px",
  "20": "20px",
  "30": "30px"
) 

// El mixin que crea las clases
@mixin generate-font-sizes($sizes) {
  // Recorremos cada uno de los elementos del mapa
  @each $key, $value in $sizes{
    // Creamos la clase e interpolamos los valores
    .fs-#{$key} {
      font-size: #{$value};
    }
  }
}

// Invocamos al mixin para que se ejecute
@include generate-font-sizes($sizes);

Al compilar nuestro código tendremos el mismo resultado que la primera vez, pero ahora pueden estar pensando que nuestro código es mas largo que el resultado, y tal vez es cierto pero si quiero por ejemplo hacer un recorrido del 1 al 100 y crear clases del fs-1 al fs-100 también puedo hacerlo con un mixin

// El mixin que crea las clases
@mixin generate-font-sizes() {
  // El loop que hace el recorrido de 1 a 100
  @for $size from 1 through 100 {
    // Creamos la clase e interpolamos los valores
    .fs-#{$size} {
      font-size: #{$size}px;
    }
  }
}

// Invocamos al mixin para que se ejecute
@include generate-font-sizes();

Con esto tendremos el resultado esperado, y esto no solo sirve para el font-size sino para cualquier cosa que se nos ocurra, podemos construir grandes cantidades de código con pequeños bloques de código en un mixin.

Esto es todo por ahora, aprendimos a usar los mixin y a reutilizar código CSS en los preprocesadores.