Functions in LESS

In this lesson we will look at how to use functions. Functions are somewhat similar to mixins, but they allow you to add parameters that can change their values.

These parameters are passed in parentheses to the function. Let's look at an example.

Let's make a function fs, which will set the font size. Let the size be passed as a parameter. The parameter will be a variable, the name of which we come up with when declaring the function:

.fs(@size) {
	// the function code will be here
}

Let's specify inside the function where the value of our parameter should be inserted:

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

Let's call our function, passing it the desired element size as a parameter:

p {
	.fs(20px);
}

As a result, after compilation, the paragraph font size will be equal to the specified value:

p {
	font-size: 20px;
}

Create a function w() that will set the width of the element.

Create a function h() that will set the height of the element.