Funktionen in LESS

In dieser Lektion werden wir uns ansehen, wie man Funktionen verwendet. Funktionen ähneln Mixins, erlauben es aber, Parameter hinzuzufügen, die ihre Werte ändern können.

Diese Parameter werden in runden Klammern an die Funktion übergeben. Schauen wir uns ein Beispiel an.

Lassen Sie uns eine Funktion fs erstellen, die die Schriftgröße festlegt. Die Größe soll als Parameter übergeben werden. Als Parameter dient eine Variable, deren Namen wir bei der Deklaration der Funktion festlegen:

.fs(@size) {
	// hier kommt der Funktionscode
}

Geben wir innerhalb der Funktion an, wohin der Wert unseres Parameters eingefügt werden soll:

.fs(@size) {
	font-size: @size;
}

Rufen wir unsere Funktion auf und übergeben ihr als Parameter die gewünschte Größe des Elements:

p {
	.fs(20px);
}

Als Ergebnis wird nach dem Kompilieren die Schriftgröße des Absatzes dem angegebenen Wert entsprechen:

p {
	font-size: 20px;
}

Erstellen Sie eine Funktion w(), die die Breite eines Elements festlegt.

Erstellen Sie eine Funktion h(), die die Höhe eines Elements festlegt.