Mixins en LESS

En esta lección nos familiarizaremos con los mixins (mezclas), que permiten incluir una clase dentro de otra. Vamos a ver qué son y cómo trabajar con ellos.

Básicamente, un mixin es el uso de unas clases dentro de otras, cuando una clase es una plantilla - un fragmento de código definido, que podemos usar en muchos lugares.

¿Por qué es esto conveniente? En CSS puro tendríamos que escribir la plantilla de código en todos los lugares donde se necesitara, mientras que en LESS podemos escribirlo en un solo lugar y luego incluirlo en los lugares necesarios del código.

Veamos un ejemplo. Supongamos que tenemos la siguiente clase:

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

Usemos esta clase como un mixin:

p {
	.mix;
	color: red;
}

Como resultado, después de la compilación, se insertarán en el párrafo los estilos de nuestra clase:

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

Explica, cuál será el resultado de la compilación del siguiente código:

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

p {
	.mix;
	width: 300px;
}