Funktioner i LESS

I den här lektionen ska vi titta på hur man använder funktioner. Funktioner är på något sätt lika mixins, men de tillåter dig att lägga till parametrar som kan ändra sina värden.

Dessa parametrar skickas i funktionens runda parenteser. Låt oss titta på ett exempel.

Låt oss skapa en funktion fs som sätter teckenstorleken. Låt storleken skickas som en parameter. Parametern kommer att vara en variabel, vars namn vi hittar på när vi deklarerar funktionen:

.fs(@size) {
	// här kommer funktionens kod att vara
}

Låt oss inuti funktionen ange vart värdet på vår parameter ska sättas in:

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

Låt oss anropa vår funktion och skicka önskad elementstorlek som en parameter:

p {
	.fs(20px);
}

Som ett resultat, efter kompilering, kommer teckenstorleken för stycket att bli lika med det angivna värdet:

p {
	font-size: 20px;
}

Skapa en funktion w() som kommer att sätta bredden på elementet.

Skapa en funktion h() som kommer att sätta höjden på elementet.