Tutorial de LESS: Los mixins

Si estás leyendo esto puede ser por dos razones: o bien estás siguiendo este tutorial desde el principio (si es así, gracias) o bien porque has buscado información en algún buscador.

En el primer caso, te viene bien repasar el índice de este tutorial para saber cómo se estructura este tutorial; en el segundo caso quizá te interesen las otras partes que forman esta guía.

Plan de vuelo

1. Introducción.
2. El uso de variables.
3. Los Mixins.
4. Reglas necesarias.
5. Funciones.
6. Divide y vencerás.

Así que, vamos con los Mixins.

¿Qué es un Mixin?

Un mixin en LESS es un conjunto de propiedades CSS agrupadas. Esto nos permite utilizar el grupo en sí y no repetir mil veces las mismas propiedades.

Si estuviésemos hablando de programación (como tal), esto sería lo más parecido a un array. Otra forma de entenderlo podría ser una variable con múltiples valores.

Como dije en el capítulo anterior de este tutorial, los mixins son, junto a las variables y funciones, uno de los tres principales pilares (y quizá de las razones de ser) de LESS.

Para entender cómo funciona un mixin vamos a ver un ejemplo real, que es como se aprende.

Los mixins paramétricos

De la explicación de qué es un mixin, habrás deducido que es un conjunto de reglas CSS agrupadas, simple y llanamente.

Pues bien, cuando hablamos de mixins paramétricos estamos hablando de aquellos mixins que reciben parámetros (al igual que las funciones).

Por ejemplo, a la hora de realizar un border-radius resulta bastante asqueroso pesado tener que escribir los prefijos para los diferentes navegadores cada vez, ¿verdad?

Veamos cómo solucionarlo con un mixin (de nada :-D):

.border-radius(@radius) {
	-webkit-border-radius:	@radius;
	-moz-border-radius:	@radius;
	border-radius:		@radius;
}
 
.sidebar {
	.border-radius(4px);
}

Si te fijas, en nuestro mixin incluimos todos los prefijos de CSS3 que permiten que el borde redondeado sea visible en webkit, mozilla… Además, como queremos reutilizar ese mixin, le asignamos el parámetro @radius, lo que nos permitirá asignarle diferentes valores cada vez que realicemos una llamada a dicho mixin.

El resultado del código anterior, una vez compilado, es:

.sidebar {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

No me digas que no es sencillo.

Además, para no tener que volvernos locos con los valores por defecto, podemos hacer que el mixin paramétrico tenga un valor por defecto. Genial, ¿verdad?

.border-radius(@radius: 6px) {
	-webkit-border-radius:	@radius;
	-moz-border-radius:	@radius;
	border-radius:		@radius;
}
 
.sidebar {
	.border-radius;
}
 
.sidebar2 {
	.border-radius(12px);
}

La idea es la misma que el ejemplo anterior, sólo que ahora nuestro mixin .border-radius tiene un valor por defecto (que se aplica a .sidebar) y que puede ser fácilmente modificado (aplicado en .sidebar2)

El código compilado sería el siguiente:

.sidebar {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}
.sidebar2 {
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
}

Explotando los mixins

Aunque este tutorial sea una simple introducción a LESS, no pienses que los mixins son mucho más complejos… Puedes complicarlos tanto como quieras.

Además, ¡creo que una vez entendido uno se entienden todos!

Espero que el contenido de esta entrada te sea tan útil como me resulta a mí, realmente LESS es muy potente, sólo hay que saber cómo explotarlo.

Si te ha gustado, no dudes en compartirlo en tus redes sociales (a la derecha tienes los botones para hacerlo) y agradecerlo con un comentario. ¡Son dos minutos y nos ayuda a seguir!

Derechos de imagen