Ir al contenido

Como trabajo con variables en less para importar diferentes modulos.

El escenario

Estoy trabajando con un framework donde existen seciones, pongamos por caso noticias y contacto.

Estas secciones pueden tener diferente apariencia o contenido, para lo que creamos los respectivos módulos noticias01, noticias02, contacto01 y contacto02. Cada uno de estos módulos consta de dos arvhivos que van asociados, un archivo .php y un archivo .less (se podría dar el caso que también existiera un archivo .js)

La estructura de carpetas de los archivos less, que es lo que nos interesa, podría ser algo así:

proyecto/
├── less/
|   ├── modules/
|   |   ├── contacto01.less
|   |   ├── contacto02.less
|   |   ├── noticias01.less
|   |   ├── noticias02.less
|   ├── conf.less
|   ├── common.less

Los archivos de variables

Para trabajar en php tengo uso archivo json donde configuro todos los modulos que necesito para cada proyecto y que convierto a variables php, con las variables puedo crear condicionales para cargar los modulos que necesito en la plantilla php.

En el caso de less no he encontrado aún una forma sencilla de convertir el archivo json a variables en less, así que toca copy-paste/buscar-reemplazar, nada complicado.

Así pues creamos dos archivos conf.php y less.conf donde icluimos las variables que llaman a los modulos, obviamente es muy aconsejable que los modulos tengan, tanto de less como de php, el mismo nombre (noticias01.php y noticias01.less).

Una vez generados los archivos de variables, con los modulos que necesitamos, supongamos que usamos noticias02 y contacto01 quedaría algo así:

// php
$noticias = noticias02;
$contacto = contacto01;
// less
@noticias: noticias02;
@contacto: contacto01;

Cargar los modulos en less con @import

Ahora solo nos queda cargar cada modulo en el archivo de less donde importamos todos los modulos del proyecto y compilamos para generar la css.

@import "conf.less";
@import "modules/@{noticias}";
@import "modules/@{contacto}";

Si existe la posibilidad que uno de los modulos no lo necesitemos, less permite seguir compilando aunque el archivo asociado a import no exista, para esto debemos añadir (optional) a @import.

@import (optional) "modules/@{slideshow}";  

Me ha llamado la atención esta característica de less, porque en sass no es posible usar variables ni mixins con @import.

¿Y todo esto para que?

Visto con un ejemplo simple puede parecer un sistema muy enrevesado, pero si cada sección puede tener hasta 5 modulos diferentes y asociamos el archivo json a el backend podemos ahorrarnos mucho tiempo en configuraciones y código, ya que una de las ventajas es que solo compilas los modulos que necesitas.