Mixins in LESS

In this lesson we'll learn about mixins, which allows you to include one class inside another. Let's see what it is and how to work with it.

Essentially, mixing is the use of some classes inside others, when one class is a blank - a certain piece of code that we can use in many places.

What is convenient about this? In pure CSS we would have to type a code template everywhere where it is needed, but in LESS you can write it in one place and then connect it to the necessary places in the code.

Let's look at an example. Let's say we have the following class:

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

Let's use this class as a mixin:

p {
	.mix;
	color: red;
}

As a result, after compilation, the styles of our class will be substituted into the paragraph:

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

Tell me what the result of compiling the following code will be:

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

p {
	.mix;
	width: 300px;
}