Mixins em LESS

Nesta lição, vamos conhecer os mixins (mistura), que permitem incluir uma classe dentro de outra. Vamos entender o que são e como trabalhar com eles.

Essencialmente, um mixin é o uso de uma classe dentro de outras, onde uma classe é um modelo - um pedaço de código específico, que podemos usar em muitos lugares.

Por que isso é conveniente? Em CSS puro, teríamos que digitar o código do modelo em todos os lugares onde fosse necessário, enquanto em LESS podemos escrevê-lo em um único lugar e depois incluí-lo nos locais de código desejados.

Vamos ver um exemplo. Suponha que temos a seguinte classe:

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

Vamos usar essa classe como um mixin:

p {
	.mix;
	color: red;
}

Como resultado, após a compilação, os estilos da nossa classe serão aplicados ao parágrafo:

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

Explique qual será o resultado da compilação do seguinte código:

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

p {
	.mix;
	width: 300px;
}