Mixins en SASS

Mixins are tools provided by CSS preprocessors, although they are not functions they can be perceived as such, and their main use is to reuse code.

On more than one occasion we have had the need to create multiple classes that do the same thing but change a single value, for example multiple classes for the font-size.

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

If we look closely, the only thing that changes in this scenario is the number both to name the class and to set the font-size value, using a mixin we can create a function that creates this code for us automatically.

Example:

// 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);

When we compile our code we will have the same result as the first time, but now you may be thinking that our code is longer than the result, and maybe it is true but if I want, for example, to go from 1 to 100 and create classes from fs-1 to fs-100 I can also do it with a 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();

With this we will have the expected result, and this not only works for the font-size but for anything that comes to mind, we can build large amounts of code with small blocks of code in a mixin.

This is all for now, we learned how to use mixin and reuse CSS code in preprocessors.

The above is the detailed content of Mixins en SASS. For more information, please follow other related articles on the PHP Chinese website!