Compilador LESS con Docker

Compila tus proyecto LESS a través de un contenedor sin tener que instalar el compilador LESS en el sistema operativo

LESS es un pre-procesador de hojas de estilo CSS. Extiende el lenguaje CSS añadiendo la posibilidad de usar variables, funciones, mixins en nuestra hojas de estilos…

LESS es un pre-procesador de hojas de estilo CSS. Extiende el lenguaje CSS añadiendo la posibilidad de usar variables, funciones, mixins en nuestra hojas de estilos.

El siguiente archivo es un ejemplo de hoja de estilo en CSS y posteriormente traducido a LESS

styles.css

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

En LESS podemos anidar las declaraciones de estilos por selector CSS:

styles.less

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

La hoja de estilos CSS resultante será la misma.

Compilando LESS con contenedor Docker

Instalación de Docker

Si queremos evitar la instalación de un compilador LESS+NODE en el sistema podemos realizar la compilación de nuestros archivos LESS con un contenedor docker usándolo como «one-off command«.

Supongamos que tenemos el archivo styles.less en la carpeta less de la raíz de nuestro proyecto como sigue:

project/
    less/styles.less
    css/
    index.html

Descargamos la imágen de NodeJS del repositorio de imágenes de Docker:

docker pull node:6.8.0

Cremos un Dockerfile en la raíz de nuestro proyecto:

project/Dockerfile

FROM node:6.9.0
MAINTAINER Albert Lacarta <urodoz@gmail.com>

# Instalamos el compilador de less
RUN npm install -g less

# Assignamos el directorio /opt como punto de entrada del contenedor
WORKDIR /opt

# Asignamos al contenedor como punto de entrada el siguiente comando
CMD lessc /opt/less/styles.less > /opt/css/styles.css

A continuación, construimos la imágen para crear el contenedor que usaremos para compilar nuestras archivos LESS ejecutando el siguiente comando en la raíz de nuestro proyecto:

docker build -t rqlogic-node-compiler .

Ahora ya tenemos la imagen Docker preparada para crear el contenedor encargado de compilar.

Ejecutando el siguiente comando compilaremos nuestro archivo LESS y el resultado compilado se guardará en la carpeta css, como styles.css.

docker run --rm -ti -v /{rutaProyecto}/project:/opt rqlogic-node-compiler

Ya tenemos el archivo CSS compilado en css/styles.css!.

Enlaces recomendados

Repositorio Github de LESS: https://github.com/less/less.js

Manual oficial de iniciación a LESS: http://lesscss.org/