DEV Community

Cover image for Mixins en SASS
Miguel Lopez
Miguel Lopez

Posted on

1

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up