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 :

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

Utilisons cette classe en tant que mixin :

p {
	.mix;
	color: red;
}

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

p {
	width: 100px;
	height: 100px;
	color: red;
}

Expliquez quel sera le résultat de la compilation du code suivant :

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

p {
	.mix;
	width: 300px;
}