Mixins en LESS

Dans cette leçon, nous allons nous familiariser avec les mixins (mélanges), qui permettent d'inclure une classe à l'intérieur d'une autre. Voyons ce que c'est et comment les utiliser.

Essentiellement, un mixin est l'utilisation d'une classe dans d'autres classes, lorsqu'une classe sert de modèle - un morceau de code spécifique, que nous pouvons utiliser à de nombreux endroits.

En quoi est-ce pratique ? En CSS pur, nous devrions resaisir le modèle de code partout où il est nécessaire, alors qu'en LESS, nous pouvons l'écrire à un seul endroit et ensuite l'inclure aux endroits souhaités du code.

Regardons un exemple. Supposons que nous ayons la classe suivante :

styles.less.mix {
  width: 100px;
  height: 100px;
}

Utilisons cette classe en tant que mixin :

styles.lessp {
  .mix;
  color: red;
}

En conséquence, après la compilation, les styles de notre classe seront insérés dans le paragraphe :

styles.cssp {
  width: 100px;
  height: 100px;
  color: red;
}

styles.less.mix {
  color: white;
  background: black;
}

p {
  .mix;
  width: 300px;
}