Less: El lenguaje dinámico de CSS

Cuantas veces nos ha tocado trabajar con hojas de estilos (CSS) y tener que repetir código porque los botones tienen el mismo color que la barra de navegación o ciertas partes de la pantalla tienen que tener el mismo padding. La gran desventaja de esto es si tenemos que cambiar algún valor lo tenemos que hacer en muchas partes dando la posibilidad de olvidarnos de alguno.

Ahora bien Less nos brinda la posibilidad de la reutilizacion de código uso de funciones entre otras cosas.

¿Que es?

Less es una librería open-source que fue creada en 2009 por Alexis Sellier la cual mejora las capacidades de CSS añadiéndole comportamiento dinámico como por ejemplo incorporando el uso de variables, operaciones y funciones. Todo esto con el fin de brindarle la posibilidad de reutilizacion de código y mejorar las hojas de estilos existentes.

Algo a destacar es que Less no reemplaza a CSS ya que el resultado de compilar un archivo Less es una hoja de estilos clásica (CSS).

¿Como lo instalo?

Para poder usar Less previamente tenemos que tener instalado npm el cual ya viene incluido en las ultimas versiones de NodeJs. Para los que no tengan instalado NodeJs la forma de instalarlo es bastante sencilla ya que para el caso de Windows existe un instalador tipo wizard en la pagina oficial, para el caso de sistemas operativos Linux lo podremos hacer por linea de comandos ejecutando lo siguiente:

Una vez que contemos con npm en nuestro sistema operativo lo único que deberemos hacer es ejecutar el siguiente comando:

Para los que no sepan como funciona npm, lo que hará es descargar e instalar la librería y debido a que hemos colocado como parámetro -g la misma podrá ser usada desde cualquier directorio.

Una forma fácil de probar si la instalación ha sido satisfactoria sera ejecutando el comando less el cual nos retornara el siguiente mensaje “Missing filename (“less –help” for help)”

Características

Las características de Less son muchas por lo cual dedicaremos este apartado a hacer una breve introducción de las mas importantes y luego en futuros post las tocaremos mas en profundidad.

Variables

Las variables al igual que cualquier lenguaje de programación nos permiten especificar un valor  y que ademas serán utilizadas en varios lugares de las hojas de estilo, pudiendo de ser necesario cambiar el valor y que afecte a todos los lugares donde es utilizada sin necesidad de modificar mas nada.

LESS CSS
@color: #4D926F;

#header {

color: @color;

}

h2 {

color: @color;

}

#header {

color: #4D926F;

}

h2 {

color: #4D926F;

}

Mixins

Los mixins son bloques reutilizables de código que pueden ser incluidas en otras clases con tan solo añadir el nombre como si fuera una propiedad mas. Estos bloques pueden recibir argumentos que modifiquen ciertas propiedades o tener valores por default en caso de no ser informadas.

LESS CSS
.rounded-corners (@radius: 5px)  {

-webkit-border-radius: @radius;

-moz-border-radius: @radius;

-ms-border-radius: @radius;

-o-border-radius: @radius;

border-radius: @radius;

}

#header {

.rounded-corners;

}

#footer {

.rounded-corners(10px);

}

#header {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

-ms-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;

}

#footer {

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

-ms-border-radius: 10px;

-o-border-radius: 10px;

border-radius: 10px;

}

Operaciones

Se pueden realizar operaciones (suma, resta y multiplicación) sobre cualquier numero, color o variable, las mismas deberán estar definidas dentro de paréntesis. Veamos algunos ejemplos:

  • Colores
LESS CSS
p {

color: (#010203 + #040506);

}

p {

color: #050709;

}

  • Cadenas
LESS CSS
p:before  {

content: (“Foo ” + “Bar”);

}

p:before  {

content: “Foo Bar”;

}

Funciones

Less nos proporciona una serie de funciones muy variadas como las encargadas de modificar colores (aclararlo, oscurecerlo o hacer un mix de colores), manipular strings o realizar operaciones matemáticas. En este link se encuentran la descripcion de todas las funciones existentes.

Importar hojas de estilos

Una de las cosas que nos aportan mayores ventajas es la posibilidad de importar dentro de un archivo LESS otro archivo del mismo tipo, dándonos la posibilidad de separar los estilos por funcionalidad o pantalla. Para poder importar un archivo dentro de otro deberemos hacer colocar la siguiente linea:

¿Como genero el CSS?

Para generar el archivo CSS a partir de uno Less deberíamos ejecutar el siguiente comando por consola:

Esta opción de compilación por linea de comandos es bastante molesta quizás para cuando estamos modificando los estilos constantemente por lo cual han aparecido en el mercado varias alternativas que están observando nuestros estilos y cuando detectan los cambios vuelven a generar nuestras hojas de estilos. Veamos brevemente algunas de ellas:

Simpleless

Simpless es una aplicación que se encuentra disponible para la mayoría de los sistemas operativos (Windows, Mac y Linux) que permite tanto monitorear los cambios en los archivos less como también generar el correspondiente CSS. Ademas incluye compresión de estilos (minificarlos como lo haría Grunt o Gulp) quitando los espacios de mas pero respetando la sintaxis y los comentarios.

Crunch

Crunch es otra alternativa para compilar los archivos Less en CSS y ademas permite editarlos. Esta aplicación se encuentra desarrollada con Adobe Air por lo cual solo es soportada por sistemas operativos Windows y Mac ya que Adobe a dejado de darle soporte a Linux.

Otras aplicaciones

Las mencionadas son quizás las mas conocidas o mas usada por la comunidad de Less pero existen muchas mas, las cuales se pueden encontrar en este link.

Conclusión

En este post introductorio acerca de Less, hemos visto a grandes rasgos las ventajas que nos presenta y algunas opciones para facilitarnos nuestra tarea diaria de tener que compilar los estilos. En futuros post haremos hincapié en cada una de las características de Less.

You may also like...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *