Less (Leaner Style Sheets) es una extensión de CSS, que incluye algunas funcionalidades extra para llevar CSS más allá. Se trata, por tanto, de una alternativa a Sass o Scss, que ya cubrí en un artículo anterior. Al explicar cómo utilizar Sass y Scss comenté que Sass es un preprocesador, lo que implica que hay que compilar el código para convertirlo a CSS antes de poder utilizarlo en producción.
Pues bien, hoy estamos de nuevo ante un preprocesador que requerirá que hagamos el paso extra de compilar el archivo antes de usarlo. A cambio, nos proporciona métodos de conveniencia muy similares a los que vimos en Sass y Scss.
¿Cómo instalar Less?
Conforme explica la documentación oficial, para utilizar Less podemos instalarlo a través de npm:
npm install -g less
> lessc styles.less styles.css
O bien importarlo directamente al navegador del cliente:
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>
Ten en cuenta que existen compiladores a tiempo real que puedes instalar como extensiones en tu IDE, como Visual Studio Code.
¿Qué nos aporta Less?
Less nos aporta:
- Variables. Nos permiten guardar información para reutilizarla en nuestro código.
- Mixins. Son una especie de función, que nos permite empaquetar una serie de declaraciones para reutilizarlas en bloque posteriormente.
- Anidación. Facilita la estructuración, lectura y mantenimiento del código, al asemejarlo a la estructura de HTML.
- Reglas @ y bubbling. Las reglas @ (como @media) se pueden utilizar en Less como si se tratara de cualquier otro selector. Además, si las anidamos, las reglas hijas heredarán las propiedades de sus ancestros.
- Operaciones. Less nos permite realizar operaciones aritméticas.
- Interpolación y escaping. También podemos aprovechar la interpolación para reutilizar selectores o hacerlos dinámicas. Less interpretará las cadenas de caracteres “escapadas” de forma literal.
- Funciones. Otra de las ventajas de Less es que viene con un paquete de funciones predefinidas para transformar colores, manipular cadenas de texto y realizar operaciones matemáticas.
- Namespaces y Accessors. Nos permiten agrupar mixins para exportarlos a otros archivos, de forma que podamos reutilizar mejor nuestro código.
- Maps. Less también permite la utilización de arrays asociativos para crear mapas de valores, facilitando la organización y limpieza del código.
- Alcance. El scope de Less es similar al de CSS, por lo que el valor de variables y mixins se buscará localmente antes de buscarse en el entorno superior o global.
- Importación. Para facilitar la modularización de nuestro código, Less (al igual que CSS) soporta la importación de código mediante la regla @import.
- Comentarios. Less permite la introducción de comentarios, tanto con la doble barra de comentarios de una línea como con la /* sintaxis habitual multilínea */.
Aprender a utilizar Less
Es muy fácil aprender a utilizar Less. Su similitud con Sass y Scss hace muy sencillo saltar de unos a otros. Además, también es muy parecido a CSS, por lo que no tardarás demasiado en aprender a utilizarlo. De hecho, hay vídeos en YouTube en que enseñan las funciones básicas en tan solo 15 minutos (compartiré un par más abajo).
Como siempre, recomiendo la consulta de la documentación oficial, que además en este caso es bastante completa y concisa. En cualquier caso, en un futuro artículo repasaré con mayor detalle las particularidades y sintaxis de este complemento a CSS.
Espero que te haya quedado claro qué es Less, qué aporta a tu rutina de código y en qué casos puede resultarte interesante utilizarlo. Si quieres profundizar sobre el tema, no dudes en dejar un comentario.