Functies in LESS

In deze les bekijken we hoe we functies kunnen gebruiken. Functies lijken enigszins op mixins, maar maken het mogelijk om parameters toe te voegen, die hun waarden kunnen veranderen.

Deze parameters worden tussen ronde haakjes doorgegeven aan de functie. Laten we naar een voorbeeld kijken.

Laten we een functie fs maken, die de lettergrootte instelt. Laat de grootte door een parameter worden doorgegeven. Als parameter zal een variabele fungeren, waarvan we de naam bedenken bij het declareren van de functie:

.fs(@size) {
	// hier komt de code van de functie
}

Laten we binnen de functie aangeven waar de waarde van onze parameter moet worden ingevoegd:

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

Laten we onze functie aanroepen, en haar als parameter de gewenste grootte van het element doorgeven:

p {
	.fs(20px);
}

Als resultaat, na compilatie, wordt de lettergrootte van de alinea gelijk aan de opgegeven waarde:

p {
	font-size: 20px;
}

Maak een functie w(), die de breedte van een element instelt.

Maak een functie h(), die de hoogte van een element instelt.