En el grupo de Facebook “Joomla! en español” ha habido en los últimos tiempos algunas preguntas sobre LESS, qué es y cómo se usa. Yo descubrí LESS el año pasado y ¡me cambió la vida! LESS trae muchas cosas que uno conoce de la programación y que extraña cuando crea hojas de estilo CSS: variables, funciones, parámetros… En este artículo hago una pequeña introducción a LESS y muestro algunos ejemplos de como se usa.

¿Por qué usar LESS?

Seguro que ya alguna vez has tenido alguno de estos problemas:

• Tu cliente te ha dado los colores que quiere en el diseno de su web. El color de base es #54258b y lo tienes definido en la plantilla en diversos archivos .css. Es el color de fondo, el de los enlaces, el de h2, el del borde de las imágenes... Tienes la plantilla ya casi completa y justo ahora se le ocurre a tu cliente que a lo mejor todo quedaría más lindo si usaras #3399ff. Ahora tienes la fantástica tarea de revisar todos los archivos .css para buscar #54258b y reemplazarlo por #3399ff

• Quieres usar gradientes de colores definidos en css. La definición de gradientes es complicada porque hay que tener en cuenta todos los navegadores distintos, se lo puede renderizar horizontal, vertical, diagonal, etc.

• Usas bordes redondeados en distintas clases y de un momento a otro decides usar una curva de 3px en vez de 5px

• Tienes clases que van heredando definiciones y se complican tanto con el tiempo que es difícil seguir su lógica

• ....

Usando LESS como preprocesador de CSS puedes simplificar mucho tu trabajo.

LESS es un lenguaje dinámico de hojas de estilo (stylesheet) que extiende la sintaxis estándar de CSS. Los archivos LESS necesitan ser compilados y convertidos en CSS para ser usados en una página web (ver más abajo).

LESS trae muchas funciones, entre ellas:

• Variables y mixins (conjunto de reglas), con las que se pueden definir valores y reglas reusables a lo largo de toda la hoja de estilo

• Clases / reglas encaladas, facilitan el trabajo y hacen la herencia de reglas más entendible

• Operadores y funciones, que permiten usar las mátematicas dentro del CSS

• y mucho más!

 

Aquí van algunos ejemplos:

 

Definir variables que después usas en tus diferentes clases:

@colorBase: #54258b;

h2 { color: @colorBase; }

p { color: @colorBase; }

.casilla { border: 1px solid @colorBase; padding: 5px;}

 

Si ahora te decides a usar #3399ff como color de base, sólo lo tienes que cambiar en un lugar, el resto se cambia dinamicamente.

 

Definir mixins (funciones / conjunto de reglas):

Este es un ejemplo de Bootstrap donde definimos un gradiente horizontal y uno vertical como clase intercalada. Como parámetros que le tenemos que pasar a la función necesitamos un color inicial (@start-color), un color final (@end-color), el porcentaje del primer color (@start-percent) y el porcentaje del segundo color (@end-percent). En la función usamos valores predefinidos, para en el caso que más adelante no le pasemos otras valores, y creamos todas las opciones para los distintos browsers.

 

#gradient {

 // Gradiente horizontal, de izquierda a derecha

 //

 // Crea puntos de stop con dos colores, start y end, especificando un color y una posición para cada punto de stop.

 // Color stops no están disponibles en IE9 y anteriores.

 .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {

   background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+

   background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+

   background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+

   background-image:  linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10

   background-repeat: repeat-x;

   filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down

 }

 // Gradiente vertical, de arriba para abajo

 //

 // Crea puntos de stop con dos colores, start y end, especificando un color y una posición para cada punto de stop.

 // Color stops no están disponibles en IE9 y anteriores.

 .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) {

   background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+

   background-image: -webkit-linear-gradient(top, @start-color, @start-percent, @end-color, @end-percent); // Safari 5.1+, Chrome 10+

   background-image:  -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+

   background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10

   background-repeat: repeat-x;

   filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down

 }

}

 

Si queremos usar un gradiente horizontal en una de nuestras clases para la plantilla ahora sólo tenemos que llamar la función y pasarle las variables necesarias.

 

.casilla-con-gradiente {

  #gradient > .horizontal(@start-color: #649b80; @end-color: #cfe0d8; @start-percent: 35%; @end-percent: 100%);

   margin: 5px 0;

   padding: 10px;

   text-align: justify;

   width: 50%;

}

Cuando procesemos esto a CSS nos va a quedar así:

 

.casilla-con-gradiente {

 background-image: -webkit-gradient(linear, 35% top, 100% top, from(#649b80), to(#cfe0d8));

 background-image: -webkit-linear-gradient(left, color-stop(#649b80 35%), color-stop(#cfe0d8 100%));

 background-image: -moz-linear-gradient(left, #649b80 35%, #cfe0d8 100%);

 background-image: linear-gradient(to right, #649b80 35%, #cfe0d8 100%);

 background-repeat: repeat-x;

 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff649b80', endColorstr='#ffcfe0d8', GradientType=1);

 margin: 5px 0;

 padding: 10px;

 text-align: justify;

 width: 50%;

}

O para el caso de los bordes redondeados también podemos definir una función con parámetros:

 

.bordesRedondeados( @bordeRadio, @bordeColor ) {

 border: 2px solid @bordeColor;

 background-color: #cfe0d8;

 -moz-border-radius: @bordeRadio;

 -webkit-border-radius: @bordeRadio;

 border-radius: @bordeRadio;

 padding: 10px;

}

 

Esa función después la usamos en alguna clase pasándole el radio y el color del borde:

 

.texto {

 font-size: 1.5em;

 .bordesRedondeados(5px, #6c6);

}

 

Traducido a CSS queda:

 

.texto {

 font-size: 1.5em;

 border: 2px solid #649b80;

 background-color: #cfe0d8;

 -moz-border-radius: 5px;

 -webkit-border-radius: 5px;

 border-radius: 5px;

 padding: 10px;

 width: 50%;

}

Crear clases intercaladas

Por ejemplo tienes definiciones para tu navegación que van repitiendo los selectores y donde no queda muy clara la herencia de las deficiones:

 

ul#nav {

 list-style: none;

}

ul#nav li {

 display: inline;

 margin: 0;

 padding: 0;

}

ul#nav li a {

 color: #aaa;

 font-size: 1em;

}   

ul#nav li a:hover {

 color: #000;

}

 

Usando LESS puedes hacerlo más claro:

 

ul#nav {

 list-style: none;

 li {

   display: inline;

   margin: 0;

   padding: 0;

   a {

     color: #aaa;

     font-size: 1em;

     &:hover { color: #000; }

   }

 }

}

Cuando compilemos el archivo LESS obtendremos el código CSS. La versión de clases intercaladas es más concisa que la versión original en cascada y es más obvio que todas las reglas están relacionadas con la lista desordenada (ul) dentro de ul#nav.

 

Hacer cálculos:

En LESS podemos usar, entre otros, operadores aritméticos. En este caso hacemos las definiciones para los títulos (headings, h1, h2...) teniendo un tamaño de letra de 13px como base. "Floor": redondea el valor para abajo, "ceil": redondea el valor para arriba

 

@font-size-base: 13px;

h1, .h1 { font-size: floor(@font-size-base * 1.92); } // ~25px

h2, .h2 { font-size: floor(@font-size-base * 1.77); } // ~23px

h3, .h3 { font-size: ceil(@font-size-base * 1.38); } // ~18px

h4, .h4 { font-size: ceil(@font-size-base * 1.23); } // ~16px

h5, .h5 { font-size:  @font-size-base; }

h6, .h6 { font-size: ceil(@font-size-base * 0.92); } // ~12px

 

Si en algún momento cambiamos el tamaño de letra de base, los otros valores se adaptarán dinámicamente.

 

 

También podemos usar operadores para "calcular" colores:

 

@colorBase: #54258b;

h1 { color: @colorBase; }

h2 { color: lighten(@colorBase, 10%); }

h3 { color: lighten(@colorBase, 20%); }

h4 { color: lighten(@colorBase, 30%); }

h5 { color: lighten(@colorBase, 40%); }

 

 

Para aprender más sobre LESS es recomendable visitar la página oficial del proyecto: http://lesscss.org/

 

¿Cómo usar LESS?

Como los archivos LESS no pueden ser interpretados por el navegador, necesitamos convertirlos en archivos CSS antes de pasarlos a la web. Hay diversas opciones recomendadas para usar LESS en nuestros proyectos.

A través de un Javascript (less.js): La ventaja es que el trabajo de la compilación queda del lado del usuario. El problema es que si el usuario ha desactivado el uso de Javascript no va a poder ver la página formateada.

A través de PHP: de esta manera estamos seguros que todos los usuarios va a ver la página bien formateada, el problema es que nuestro servidor tiene que hacer el trabajo de compilación.

Para mi personalmente esos métodos son practicables a lo mejor durante el desarrollo de una web, pero no para un sistema productivo ya que le quitan rendimiento a la página.

Compilador local: El método que a mi me gusta es usar un compilador local, creando de ese modo los archivos CSS que incluyo dentro del index.php de mi plantilla.

Aquí seguro que hay compiladores para cada gusto. Yo uso "Crunch", un programa desarrollado en AdobeAir y que es un editor de LESS y CSS y compilador al mismo tiempo.

 

 

 

¿Cómo crear archivos LESS?

Archivos LESS son muy parecidos a los archivos CSS con su propia sintaxis para variables y funciones:

Variables se escriben con un @ delante, por ejemplo @colorBase: #54258b;

Cada función tiene su sintaxis que hay que ir aprendiendo a medida que uno las necesita leyendo las explicaciones en la página oficial de LESS.

 

Observaciones importantes:

En uno de los códigos más arriba tenemos esta linea:

 

&:hover { color: #000; }

 

El símbolo & es importante para que el compilador no inserte un espacio en blanco antes de la definición. Si ponemos la linea sin &

 

a {

 color: #aaa;

 font-size: 1em;

 :hover { color: #000; }

}

 

al convertirlo a CSS el compilador hará esto:

 

a {

 color: #aaa;

 font-size: 1em;

}

a :hover { color: #000; }

que por supuesto no será bien interpretado. El símbolo & es por eso importante sobre todo en combinación con pseudo-clases como :hover.

 

En un archivo LESS también se pueden escribir comentarios:

 

/* Este comentario va a aparecer en el archivo compilado CSS */

// Este comentario no va a aparecer en el archivo compilado CSS

 

En un archivo LESS podemos importar otros archivos LESS o CSS:

 

@import "otro.less";

@import "adicional.less";

@import "extras.css";  // Este archivo no va a ser traducido por LESS

 

En un archivo LESS podemos agregar tipografías:

Importando de otros archivos:

 

// Font Awesome

@import "font-awesome/font-awesome.less";

 

O usando fuentes de tipografía locales:

 

@FontsPath:   "../fonts"; // En esta carpeta tengo guardadas mis tipografías

@font-face {

   font-family: 'DroidSerifRegular';

   src: url('@{FontsPath}/DroidSerif-Regular-webfont.eot');

   src: url('@{FontsPath}/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),

        url('@{FontsPath}/DroidSerif-Regular-webfont.woff') format('woff'),

        url('@{FontsPath}/DroidSerif-Regular-webfont.ttf') format('truetype'),

        url('@{FontsPath}/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');

   font-weight: normal;

   font-style: normal;

}

@font-family-serif: "DroidSerifRegular", Georgia, "Times New Roman", Times, serif;

body {

 font-family: @font-family-serif;

}

 

¿Qué tiene que ver LESS con Joomla?

Nada y mucho al mismo tiempo.

No es necesario aprender LESS para usar Joomla!, pero facilita enormemente el trabajo de crear o personalizar plantillas.

Por otro lado Joomla! 3 trae ya el framework Bootstrap y Bootstrap trae todas sus definiciones de hojas de estilo en LESS (también en SASS, que es otro preprocesor).

Desde hace un tiempo diseño mis plantillas tomando como base el BlankTemplate de Alexander Schmidt que trae la última versión de Bootstrap y los archivos básicos para empezar con una plantilla. Alexander ha escrito un muy buen ebook (en inglés y alemán) que explica paso a paso el desarrollo de una plantilla basada en BlankTemplate, por supuesto usando LESS.

 

Para escribir este artículo busqué inspiración en otros tutoriales que también recomiendo visitar:

http://www.work-paper.de/less-css-stylesheets/

http://www.hongkiat.com/blog/less-css-tutorial-design-slick-menu-nav-bar/

http://www.sitepoint.com/write-better-css-with-less/

http://www.elated.com/articles/less-is-more-make-your-css-coding-easier-with-less/

 

Otros enlaces:

http://lesscss.org/

http://crunchapp.net/

http://getbootstrap.com/

http://blank.vc/