Programando o Intentándolo

En Less las estructuras condicionales se consiguen mediante los CSS guards y Mixin guards, lo que viene a ser css/mixins protegidos que parece una cosa extraña pero no son más que mixins o estilos condicionales, de ahí lo de protegidos, porque solo se usan cuando se cumplan las condiciones y sino es como que no existiesen.

Aunque el nombre del articulo sea Mixins condicionales es más por mantener un guion que por otra cosa porque en realidad el uso de los condicionales no está limitado a los mixins por lo que se pueden usar de igual modo con cualquier selector CSS e incluso con el operador & que puede ser útil para agrupar varios selectores con una condición o simplemente para hacer solo condicionales algunas de las propiedades de una clase por ejemplo.

Los mixins son sin lugar a dudas junto a las variables y las funciones una de las características principales de Less, incluso podríamos decir que es el pilar fundamental sobre el que se sustenta porque es con los mixins donde se saca el verdadero potencial de las variables y las funciones.

Un mixin es una clase cuya finalidad es ofrecer una funcionalidad que pueda ser reutilizada en otras clases pero que no está pensada para usarse de forma autónoma.

Una definición muy bonita pero quizás no suficientemente clara, he puesto a propósito reutilizada y no heredada porque con un mixin se busca coger una funcionalidad y ponerla donde creamos oportuno pero sin tener que convertir el selector en el que se use en una especialización de la clase padre que es lo que hace el concepto de ...

Con Less se introduce el concepto de herencia, otro de los puntos que se echaba de menos en CSS y que nos va a ayudar a estructurar mejor nuestros estilos además de permitirnos eliminar el uso de clases base en nuestro HTML.

Para hacer que un selector en Less herede las propiedades de otro hay que utilizar la pseudo-clase :extend() que se puede usar de 2 modos. Como hacemos habitualmente con las pseudo-clases o bien usando el operador & como vimos en el primer artículo del tutorial, el resultado es el mismo de ambas formas así que usar una u otra forma es cuestión de gustos, personalmente me quedo con la primera.

Es importante que extend siempre sea la última pseudo-clase porque si no se producirá un fallo en la compilación.

[crayon-59b881cf1aed3035920714/]

Y el ...