¿Qué es LESS? Como utilizar less para mejorar nuestro CSS3 (Less.js)

(Primera parte)

LESS es una pequeña y gran herramienta que extiende las posibilidades del CSS añadiendo variables, mezclas, operaciones y reglas anidadas. Esto significa que con LESS podemos escribir código ligero y óptimo de forma muy rápida. LESS (less.js) también nos va a ser muy útil para simplificar algunas del las propiedades avanzadas del CSS3, y sobretodo para combinar varias propiedades en una sola orden.

LESS es un compilador o un previo que procesa las instrucciones previamente para facilitar luego las cosas y hacer que nuestro CSS sea más fácil de mantener, más límpio, más personalizable y más extensible. A primera vista puede parecer que nos complica las cosas, pero en realidad nos va a facilitar la vida si nos gusta el CSS y estamos acostumbrados a trabajar con él.

Veamos algunos ejemplos:

Para empezar vamos a introducir estas lineas dentro de la etiqueta HEAD de nuestro html:

<link rel="stylesheet/less" href="style.less" type="text/css">

Fíjate que hemos incluido rel=”stylesheet/less”, para llamar a LESS.js que se encuentra alojado por Google. A partir de ahora todo se va a complilar automáticamente directamente en el navegador.
El siguiente paso es crear un archivo que se llame style.less o el nombre que tu quieras pero con la extensión .less y ya podemos empezar a declarar variables.
Veamos por ejemplo un par de variables de color. Imagina que tu web tiene dos colores, el principal y el secundario, en lugar de tener que recordar el color cada vez, simplemente podemos utilizar las variables:

@primaryColor: #383939;
@secondaryColor: #66bbe3;

(para definir una variable en LESS utilizamos el símbolo @)

A partir de ahora cada vez que queramos utilizar un color solo tenemos que incluir la variable en lugar del código hexadecimal del color. ¿Más fácil de recordar no? Nuestro CSS quedaría así:

background-color: @primaryColor;
color: @secondaryColor;

Por supuesto, si en un futuro decidimos cambiar los colores generales de nuestra web, solo tendremos que cambiar la variable de LESS y no perderemos el tiempo modificando un montón de lineas de nuestro CSS.

Otro punto fuerte de LESS es que también podemos crear operaciones con JavaScript o cualquier otro lenguaje que queramos y declararlas como variables. Esto puede ser muy práctico. Veamos un ejemplo MUY simplificado: Digamos que queremos crear una caja que sea el doble de ancho que de alto, podemos declarar la altura en una variable y luego crear otra variable que sea dos veces el número de la otra variable:

@boxHeight: 200px;
@boxWidth: @boxHeight * 2;

Después, en el código podemos utilizar estas variables para definir el tamaño de nuestras cajas y si cambiamos la altura, el ancho se adaptará automáticamente:

height: @boxHeight;
width
: @boxWidth;

Hasta aquí la primera parte del artículo sobre LESS. Si quieres que publiquemos las segunda parte por favor deja un comentario

Esta entrada fue publicada en Diseño web general, Herramientas y utilidades, Maquetación web, Trucos y consejos web y clasificada en , , , , , , , . Guarda el enlace permanente. Publica un comentario o deja un trackback: URL del Trackback.

Publicar un Comentario

Tu email nunca será publicado o compartido. Los campos requeridos están marcados con un *

*
*

Puedes usar estas etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

By: Dissenyaweb.com