Mixins et SASS

Les mixins sont des outils fournis par les préprocesseurs CSS, bien qu'ils ne soient pas des fonctions, ils peuvent être perçus comme tels, et leur utilisation principale est de réutiliser du code.

À plusieurs reprises, nous avons eu besoin de créer plusieurs classes qui font la même chose mais modifient une seule valeur, par exemple plusieurs classes pour la taille de la police.

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

Si nous regardons attentivement, la seule chose qui change dans ce scénario est le numéro à la fois pour nommer la classe et pour définir la valeur de la taille de la police, en utilisant un mixin, nous pouvons créer une fonction qui crée automatiquement ce code pour nous.

Exemple :

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

Lorsque nous compilerons notre code, nous aurons le même résultat que la première fois, mais maintenant vous pensez peut-être que notre code est plus long que le résultat, et c'est peut-être vrai mais si je veux, par exemple, passer de 1 à 100 et créer des classes de fs-1 à fs-100 je peux aussi le faire avec 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();

Avec cela, nous aurons le résultat attendu, et cela fonctionne non seulement pour la taille de la police mais pour tout ce qui nous vient à l'esprit, nous pouvons construire de grandes quantités de code avec de petits blocs de code dans un mixin.

C'est tout pour l'instant, nous avons appris à utiliser le mixin et à réutiliser le code CSS dans les préprocesseurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!