LESS es el lenguaje de estilos dinámico de moda (con permiso Sass ). En este artículo describiremos cómo instalar/usar LESS desde Ubuntu.

A pesar de que no es el objetivo de este artículo detallar las características y las ventajas/inconvenientes de LESS frente a Sass sí dejaremos algunos ejemplos básicos de las ventajas frente a código CSS compilado (el CSS “de toda la vida”).

Por ejemplo, gracias a LESS podemos convertir un código CSS compilado como:

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

en algo como:

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

Como vemos un código mucho más sencillo de modificar y mantener gracias a que LESS nos permite usar variables y funciones (mixins) en nuestro código CSS. Si en el futuro quisiéramos cambiar el color de todos los elementos que comparten la variable @color bastaría cambiar el valor asignado a esa variable en lugar de tener que modificar X líneas distintas.

Otra de las ventajas de LESS es que nos permite usar CSS anidado. Esto simplifica el código CSS y nos proporciona un código más fácil de interpretar. Un ejemplo de CSS anidado sería:

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

que al compilarse quedaría en algo como:

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

El funcionamiento de LESS es sencillo. El código CSS se genera en archivos .less que son compilados y convertidos en CSS antes de mostrárselo al usuario. Es al compilar el código cuando LESS sustituye todas las variables y funciones dejando el código CSS final.

Oficialmente hay dos opciones para usar LESS:

  1. Línea de comandos. Compilamos los archivos CSS y los adjuntamos a la versión final de la web. Las ventajas de este método son que vemos los posibles errores que se produzcan al compilar el código y que podemos evitar que se tenga acceso directo a los archivos .less
  2. Archivo JS. Una librería javascript se encarga de compilar los archivos .less antes de mostrárselos al usuario. La ventaja de usar este método es que es mucho más sencillo de usar puesto que nos evitamos recompilar cada vez. El principal inconveniente es que el usuario puede desactivar javascript desde su navegador. Esto llevaría a que la página cargara sin estilos.

Nuestra recomendación es asegurarnos de que podemos trabajar con ambos métodos. Para el desarrollo usaremos la versión javascript. De esta forma podremos editar los estilos fácilmente y nos ahorraremos compilar cada vez que cambiemos un estilo. Antes de poner el sitio en producción compilaremos los archivos .less manualmente. De esta forma nos aseguramos de que el usuario siempre visitará la web en producción con el código CSS correcto.

Otra de las ventajas del método elegido es que si por cualquier motivo los estilos no se actualizaran correctamente con la librería javascript podremos hacer una prueba de funcionamiento con la línea de comandos y ver qué está fallando.

Instalar la versión javascript en una web es tan sencillo como incluir en el head de nuestra web algo como:

<script type="text/javascript" src="less.js"></script>

Simplemente resaltamos:

  • La llamada al archivo LESS siempre debe hacerse antes que la llamada al archivo JS.
  • La llamada al archivo LESS usa rel=”stylesheet/less” en lugar del corriente rel=”stylesheet”

Para instalar la línea de comandos en Ubuntu seguiríamos el método:

sudo apt-get install npm
npm install less

(Importante: ejecutamos npm sin sudo)

Esto instalará el Node Packet Manager y a través de él instalará LESS. Al finalizar tendremos un archivo en la carpeta bin de nuestro usuario ( /home/USUARIO/bin/lessc ) listo para que lo usemos para compilar archivos. Por comodidad enlazaremos el archivo a nuestro /usr/bin/ con:

sudo ln -sf /home/USUARIO/bin/lessc /usr/bin/lessc

(Importante: sustituir USUARIO con tu nombre de usuario)

Esto nos permitirá usar el compilador con lessc en lugar de con /home/USUARIO/bin/lessc

Para comprobar que el compilador por línea de comandos funciona podemos escribir en la carpeta donde tenemos el proyecto:

lessc ./less/styless.less > styless.css

Si no se produce ningún error al compilar obtendremos un archivo styless.css listo para usar.

Más información:

- An Introduction To LESS, And Comparison To Sass | Smashing Coding (inglés)

- lessphp – LESS compiler in PHP (inglés)