Less el preprocesador de CSS

Hacía tiempo que no volvíamos a tocar el tema del diseño y la programación web y he querido dedicar esta entrada a una de las herramientas que ha conseguido llamar mi atención, denominada Less y que voy a intentar explicar.

Qué es Less

Básicamente Less es un preprocesador de CSS, lo podríamos definir de forma más mundana, como una capa que colocaríamos por encima de CSS y que nos va a permitir ampliar las capacidades de este lenguaje para crear hojas de estilo.

En verdad Less, no es el único preprocesador de CSS, hay varios y actualmente no hay un claro dominante, pero Less es uno de los proyectos que cuenta con más apoyo por parte de la comunidad.

La necesidad de usar Less

La necesidad de usar Less viene regida por las carencias que tiene CSS. Una cosa muy básica para cualquier programador es poder definir variables y constantes, esto nos permite dejar un código más claro y poder readaptarlo con mayor facilidad, pero CSS no permite usar variables.

Este tipo de carencias es lo que Less intenta suplir.

Cómo funciona Less

El funcionamiento es muy sencillo y en mi caso me recuerda a compilar los programas. Nosotros vamos a trabajar con un editor, con un archivo .less y cuando acabemos de editar nuestra hoja de estilos, lo único que debemos hacer es ejecutar el módulo de Less que nos va a permitir generar nuestro archivo .css como siempre hemos realizado.

Qué nos proporciona Less

Algunas de las cosas que nos proporciona Less son las siguientes:

• Variables que se definen de la siguiente manera: @blanco: #FFF;
• Mixins que son una manera de agrupar varias propiedades y darles un nombre para usarlas, sin tener que escribirlas cada vez. Lo que nos permite encapsular la funcionalidad.
• El uso de operadores aritméticos.
• El uso de imports para incluir otros archivos en el mismo.

Estas son algunas de las características el resto se pueden ver aquí.

Después de ver que nos aporta, lo mejor es ver un ejemplo de su utilización. No soy ningún experto en el mismo, pero creo que queda bastante claro como funciona y además aprovecho para que veáis como funciona Brackets, el software del que hablábamos el otro día.

Actualizacion: Agradecemos a @book_tech el habernos mandado un enlace de un curso completo y en español de LESS disponible de forma gratuita aquí