Less es un preprocesador para CSS que nos permite trabajar hojas de estilo con funcionales de un lenguaje de programación.

Less se parece mucho a CSS puro, por esa razón es super fácil aprender cómo usar las funcionalidades agregadas como son: el uso de variables, mixins, anidamientos y funciones.

Es precisamente por las funcionalidades que acabo de mencionar que podemos pasar de esto:

@color-claro: #fff;

.intro {
	width: 1340px;
	height: 650px;
	padding: 10px;
	margin: 0 auto;
	position: relative;
	&__categorias {
    	color: fade(@color-claro, 50%);
	}
}

A esto (ya compilado)

.intro {
	width: 1340px;
	height: 650px;
	padding: 10px;
	margin: 0 auto;
	position: relative;
}

.intro__categorias {
	color: rgba(255, 255, 255, 0.5);
}

Adicional a ello, podemos modular nuestro código, lo que nos permite ahorrar tiempo a la hora de estructurar nuestro diseño.

Instalación

Lo primero que debemos hacer es instalar las herramientas que nos van a permitir compilar nuestro código Less a CSS y que pueda leerlo el navegador, para esto tenemos 3 opciones:

1. Prepos: Compilador de Pug (HTML), y de Less, Sass, Stylus (CSS)
2. Compilar desde la terminal
3. Directamente en el navegador, mediante un script y la etiqueta <link>

Prepos

Al igual que con Pug, el preprocesador para HTML, podemos utilizar Prepos para compilar, debugear y visualizar el código en tiempo real. Es multiplataforma y es completamente gratuito.

Descargar: https://prepros.io/

Una alternativa a instalar prepros es compilar todo desde el terminal (esto nos permite hacer uso de los scripts en npm para agilizar nuestro flujo de trabajo).

Compilar desde la terminal

Requerimientos: nodeJS

Para instalar Less ingresamos la siguiente línea de comandos en nuestro terminal:

npm install -g less

Una vez finalice, para compilar nuestro código Less ingresamos la siguiente línea de comandos, donde debemos definir el input (style.less) y el output (style.css)

lessc styles.less styles.css

Directamente en el navegador

Simplemente agregamos las siguientes líneas de código directamente en el documento HTML para que antes de empezar a pintar nuestro código CSS se ejecute la compilación.

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="//cdn.jsdelivr.net/npm/less"></script>

Manos a la obra

Anidamiento

La primera funcionalidad que podemos observar claramente es la posibilidad de anidar nuestro código para que nos permita estructurar mejor nuestros estilos.

Imaginemos la siguiente estructura de código HTML:

<div class="galeria">
	<div class="galeria__imagen">
    	<img src="url/imagen.jpg" alt="Título de la imagen">
    </div>
    <div class="galeria__contenido">
    	<h3>Título de la imagen</h3>
        <p>Título de la imagen</p>
        <a class="boton">Leer más…</a>
    </div>
</div>

De manera tradicional tendríamos que definir nuestro código CSS de la siguiente manera:

.galeria {
	// ...
}
.galeria__imagen {
	// ...
}
.galeria__imagen img {
	// ...
}
.galeria__contenido {
	// ...
}

Con Less podríamos hacer un anidamiento considerando que este componente pertenece a una galería y a partir de ahí los elementos dentro de el empiezan llamándose de la misma

.galeria {
	// ...
	&__imagen {
    	// ...
        img {
        	// ...
        }
    }
    &__contenido {
    	// ...
    }
}

En la parte del código que incluye & le indica al código que el nombre padre (galeria) se va a adicionar al texto que le sigue al símbolo ampersand. De esta manera lo va a compilar como .galeria y galeria__imagen respectivamente.

En la parte de código que no lo incluye, como el caso de la etiqueta img, lo que va a hacer es adicionar con espacio creando .galeria__imagen img puesto que no contiene el & lo va a separar.

✨ De ahí la importancia de tener una metodología para nombrar nuestros componentes HTML y tener bien en orden nuestro código.

Importar varios archivos Less

Con Less tenemos la posibilidad de poder importar archivos con la finalidad de ordenar nuestro código (modularlo).

@import "globales.less";
@import "intros.less"

Si bien es cierto que podemos trabajar todo en un mismo archivo, como lo hacemos con CSS puro, tener nuestro código separado por módulos o funciones permite tenerlo mas organizado.

📁 css
┖ 📄 globales.less
┖ 📄 intros.less
┖ 📄 styles.less ← Aquí importamos globales e intros.
┖ 📄 styles.css ← Hoja de estilos ya compilada.

Variables

En una variable almacenamos datos que se puede reutilizar en todo el documento.

De esta manera evitamos tener que escribir una y otra vez cada que se realizar un cambio, ya que sólo vamos a modificar el valor de la variable y este cambio se verá reflejado en todo los lugares donde haya sido utilizada.

Generalmente, lo que almacenamos en variables son las guías de estilo de nuestro sitio: colores, fuentes, espacios, etc.

Pueden declararse en cualquier parte del documento (o documentos –módulos–) de estilos, sin embargo, por orden al trabajar es normal incluirlos dentro del módulo global (globales.less).

@variable-fuente: "Lato", sans-serif;
@variable-color: #fff;

⭐ El nombre tiene que ser genérico y que se le vincule con la propiedad a definir. De esta manera cualquier cambio que se haga no se tendrá que renombrar.

Para hacer uso de ellas, simplemente mandamos llamar la variable (incluyendo la @) dentro los valores de la propiedad.

body {
	font: @variable-fuente;
}

Mixins

Su finalidad es ofrecer una funcionalidad de que se puedan reutilizar otras clases sin que se usen de forma autónoma.

Nos permite crear bloques reusables de código que cambian su resultado dependiendo de los parámetros que enviemos.

Con los mixins en Less logramos escribir menos código, produciendo un código más claro, más expresivo y sobre todo más fácil de mantener.

Siguiendo la misma idea, definimos dentro de nuestro archivo global (globales.less) estableciéndolos como si asignáramos propiedades a una clase.

.general-box-shadow {
	margin: 0 auto;
    box-shadow: 0px 0px 0px 0px #333; 
}

Esto nos permitirá ahorrar código cada vez que utilicemos estas propiedades dentro de otras clases.

.caja {
	max-width: 430px;
    padding: 25px;
    .general-box-shadow; // Mixin
}

Una característica muy interesante que tienen los mixins en Less, es la posibilidad de pasar parámetros para hacerlo un poco mas versatil a la hora de reutilizar el código.

.general-box-shadow(@color) {
	margin: 0 auto;
    box-shadow: 0px 0px 0px 0px @color; 
}

De esta manera, si bien podemos utilizar el mismo código con las mismas reglas cada vez, en cada ocasión podemos pasar ciertos parámetros que nos permite personalizar cada propiedad, en este caso el color

.caja {
	max-width: 430px;
    padding: 25px;
    .general-box-shadow(@variable-color); // Mixin
}

Funciones

Las funciones en Less, son un poco distintas de otros lenguajes de programación. Aquí ya están prediseñadas por lo que sólo podemos utilizar las que ya están definidas en el propio lenguaje.

La diferencia con los mixins y las funciones es que las funciones por lo general hacen los cálculos y regresan el resultado, que es usado como valor de alguna propiedad.

.intro{
	&__categorias {
		color: fade(@color-claro, 50%);
	}
}

Esto transformaría el color de una forma un poco mas fácil de entender. Una opción a eso sería poner el valor en RGBA asignando un valor en el atributo alpha de los colores.

.intro {
	&__categorias {
		color: rgba(255, 255, 255, 0.5);
	}
}

Para saber mas acerca de las funciones en Less:

Functions | Less.js

Less extends CSS with dynamic behavior such as variables, mixins, operations and functions. Less runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only).

The Core Less Team

👉 Por convención, podemos definir que las funciones y los mixins se coloquen al final de las reglas.

Conclusión

Trabajar con Less te permite ahorrar código y hacerlo mas funcional gracias a todas las características que se incorporan.

Esto se traduce en ahorro de tiempo tanto para escribirlo como para mantenerlo pues en proyectos pequeños no sería relevante, pero en la medida de que vaya creciendo es posible que necesitemos una mejor forma de trabajar con nuestros estilos.

Lo siguiente que vamos a hablar será sobre Sass y Stylus, otros dos preprocesadores CSS muy potentes a la hora de trabajar.