Herramientas de programación web: LESS

Cualquier programador o diseñador de páginas web sabe que el lenguaje que se usa para dar estilo a las páginas web HTML es el CSS (Cascading Style Sheets). Se trata de lenguaje de marcas muy potente que permite separar el contenido de la presentación, aplicando estilos a los elementos HTML de forma individual o global, pero que tiene una deficiencia enorme: no se puede parametrizar. Es decir CSS no permite definir variables, operaciones o funciones.

LESS es una extensión del lenguaje CSS que permite usar variables, aplicar operaciones aritméticas (sumas, restas, etc.) y definir funciones para código repetitivo. Desgraciadamente los navegadores no entienden LESS, por lo que será necesario compilar el código convirtiéndolo en CSS. Sin embargo para usar LESS en un proyecto web no se requiere usar plug-ins ni nada parecido. Hay varias formas de compilar las plantillas LESS:

• La primera es hacerlo de forma estática a través de un compilador. Se trata de compilar las plantillas LESS convirtiéndolas en hojas de estilo CSS normales que se usarán de la forma habitual. Hay varias aplicaciones que convierten plantillas LESS en archivos CSS como Simpless o Less.app y existe un compilador oficial llamado lessc (para Linux):

$ lessc styles.less > styles.css

• La segunda forma consiste en usar la librería javascript node.js en el lado del servidor para compilar de forma dinámica las plantillas LESS. Esta es la forma más habitual.
• La tercera y última forma de usar LESS es a través de javascript del lado del cliente usando less.js. Esta sólo se recomienda para proyectos muy pequeños o para entornos de desarrollo, ya que es necesario compilar la hoja de estilos en cada ejecución, lo que puede ralentizar mucho la ejecución.

Origen y desarrollo

LESS fue desarrollado por Alexis Sellier, conocido como cloudhead, como un proyecto de código abierto que actualmente está mantenido por the LESS core team. Su uso es libre y gratuito.

Sintaxis de LESS

No voy a extenderme en la sintaxis de LESS, aunque voy a poner un ejemplo de algunas de las estructuras más importantes. Para más información sobre la sintaxis consultar los enlaces al final del artículo.

Variables: Podemos definir variables y darles cualquier valor. Los nombres de variable empiezan siempre con @ y podemos usarlas a lo largo del código siempre que las necesitemos.

@rojo: #C00000;
@verde: #008000;
@azul: #0000FF;

h1 { color: @rojo; }
a { color: @verde; }
a:hover { color: @azul; }

Operaciones aritméticas: LESS permite aplicar operaciones como sumas, restas o multiplicaciones. Por ejemplo se pueden sumar dos colores o multiplicar pixels.

@ancho: 100px;
@azul: #000080;
@azul-claro: (@azul + #111);

.azul-claro {
    background-color: @azul-claro;
    width: (@ancho * 2);
}

Mixings: Esta construcción permite aplicar las propiedades de un conjunto de reglas a otro conjunto de reglas, permitiendo parametrizaciones e incluso el uso de valores por defecto.

.borde-simple(@color-borde: black) {
    border: solid 1px @color-borde;
}

#container {
    .borde-simple;
}

#error {
    .borde-simple(#FF0000);
}

Reglas Anidadas: LESS soporta una sintaxis alternativa a CSS con respecto a jerarquía de clases en forma de clases anidadas. Por ejemplo:

#header {
    width: 30px;
    h1 { float: left; color: red; }
    h2 { float: right; color: blue; }    
}

...se convertirá en:

#header { width: 30px; }
#header h1 { float: left; color: red; }
#header h2 { float: right; color: blue; }

Funciones de Color LESS soporta una gran variedad de funciones para transformar colores y obtener información de un color.

• lighten(@color, 10%): Devuelve un color un 10% mas claro.
• darken(@color, 10%): Devuelve un color un 10% mas oscuro.
• saturate(@color, 10%): Devuelve un color un 10% más saturado
• desaturate(@color, 10%): Devuelve un color un 10% menos saturado
• fadein(@color, 10%): Devuelve un color un 10% menos transparente
• fadeout(@color, 10%): Devuelve un color un 10% más transparente
• spin(@color, 10): Devuelve un color con 10 grados de tono mayor.
• spin(@color, -10): Devuelve un color con 10 grados de tono menor
• hue(@color): Devuelve el valor del matiz del color.
• saturation(@color): Devuelve el valor de la saturación del color.
• lightness(@color): Devuelve el valor de la luminosidad del color.

Conclusiones

LESS es una herramienta muy potente para el desarrollo web que eleva CSS al nivel de lenguaje de programación con lo que la creación de hojas de estilo se convierte en una parte más del proceso de desarrollo de software.

Enlaces

• LESS. Página web oficial [EN]
• LESS, el lenguaje de hojas de estilo dinámico en Genbeta.
• Qué es LESS CSS y cómo funciona de Iván E. Mendoza.
• Hojas de estilo en cascada en la Wikipedia.
• Guía breve de CSS del W3C.
• W3School CSS Tutorial [EN]