Mixins in LESS

In dieser Lektion machen wir uns mit Mixins (Beimischung) vertraut, die es ermöglichen, eine Klasse innerhalb einer anderen einzubinden. Lassen Sie uns verstehen, was das ist und wie man damit arbeitet.

Im Wesentlichen ist ein Mixin die Verwendung von Klassen innerhalb anderer Klassen, wobei eine Klasse eine Vorlage - ein bestimmtes Code-Stück - darstellt, das wir an vielen Stellen verwenden können.

Wozu ist das nützlich? In reinem CSS müssten wir die Code-Vorlage überall dort eingeben, wo sie gebraucht wird, aber in LESS können wir sie an einer Stelle schreiben und sie dann an den benötigten Stellen im Code einbinden.

Sehen wir uns ein Beispiel an. Nehmen wir an, wir haben die folgende Klasse:

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

Verwenden wir diese Klasse nun als Mixins:

p {
	.mix;
	color: red;
}

Als Ergebnis werden nach der Kompilierung die Stile unserer Klasse in den Absatz eingefügt:

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

Erklären Sie, wie das Ergebnis der Kompilierung des folgenden Codes aussehen wird:

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

p {
	.mix;
	width: 300px;
}