Tutorial de LESS: Los mixins

less is more

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

4 comentarios en “Tutorial de LESS: Los mixins

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

DARÍO BALBONTÍN FERNÁNDEZ es el Responsable del tratamiento de los datos personales del usuario y le informa que estos datos serán tratados de conformidad con lo dispuesto en el Reglamento (UE) 2016/679 de 27 de abril (GDPR) y la Ley Orgánica 3/2018 de 5 de diciembre (LOPDGDD), por lo que se le facilita la siguiente información del tratamiento: Fin del tratamiento: mantener una relación comercial y el envío de comunicaciones sobre nuestros productos y servicios. Criterios de conservación de los datos: se conservarán mientras exista un interés mutuo para mantener el fin del tratamiento y cuando ya no sea necesario para tal fin, se suprimirán con medidas de seguridad adecuadas para garantizar la seudonimización de los datos o la destrucción total de los mismos.Comunicación de los datos: No se comunicarán los datos a terceros, salvo obligación legal. Derechos que asisten al usuario: Derecho a retirar el consentimiento en cualquier momento. Derecho de acceso, rectificación, portabilidad y supresión de sus datos y a la limitación u oposición al su tratamiento. Derecho a presentar una reclamación ante la Autoridad de control (agpd.es) si considera que el tratamiento no se ajusta a la normativa vigente. Datos de contacto para ejercer sus derechos: contacto@dariobf.com.

¡Únete ya a BFLabs GRATIS! Estreno próximamente... Más información