less

Componentes CSS reutilizables con Less

Less es un conocido pre-procesador de CSS que, al igual que Sass o Stylus, nos permite escribir unos estilos de una manera mucho más sencilla y mantenible. Quizá un buen aval para este tipo de librerías sera que grandes librerías como Bootstrap los utilizan.

En este artículo voy a mostrar unas propiedades tan útiles como poco conocidas de esta herramienta, que nos pueden facilitar mucho el trabajo para reutilizar nuestro código en otros proyectos y cumplir con la filosofía DRY.

  • Carga lazy y en scope de las variables
  • Realizar un @import dentro de un scope

Vamos a ver cada una de ellas por separado:

La carga de variables en less se realiza de forma lazy. Esto quiere decir que podemos utilizar variables antes de haberlas declarado:

Además, si las variables aparecen varias veces durante el procesamiento, la última (en el mismo scope)  tiene preferencia:

¿Cómo podemos aprovechar esta cualidad de Less en nuestros proyectos? Imaginemos que tenemos los estilos de nuestra aplicación en el archivo app.less, y nos piden adaptar algunos estilos para crear un tema de accesibilidad (mayor contraste, tamaños de fuente mayores, etc.). Sería tan sencillo como realizar lo siguiente:

Es increíble lo sencillo y fácil que resulta. Pero además, podemos aprovechar la segunda de las propiedades que comentaba al principio del artículo: es posible realizar un import en un scope determinado, sobrescribiendo las variables únicamente dentro del mismo scope. Veamos esto en un ejemplo en el que tenemos varios temas:

Notad que es necesario hacer el @import con la opción multiple, para procesar de nuevo el fichero con los nuevos valores.

En resumen, less es una potente herramienta que siempre recomiendo (al igual que Sass). Conocer este tipo de propiedades puede ahorrarnos muchísimo tiempo en nuestro trabajo y resolver tareas que en otros casos resultarían tediosas.

0 comentarios

Dejar un comentario

¿Quieres unirte a la conversación?
Siéntete libre de contribuir

Deja un comentario

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