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
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/