Streaming Words

Hay todo un movimiento que se esta gestando en el mundo del diseño Web. El mismo gira en torno a extraños conceptos que no por eso dejan de ser fascinantes.

Node.js es el primer ejemplo de esto. Algo que quizas jamas se nos paso por la cabeza Java Script corriendo no del lado del cliente sino en un servidor, respondiendo diversas peticiones.

Pero llamo mi atención tambien todo lo que gira en torno a CSS y hojas de estilo. Y en esta entrada quiero hacer una mención especial a LESS. Basicamente consiste en un archivo JS que nosotros importamos a nuestro diseño. ¿Qué hace este archivo? Pues lisa y llanamente dota a CSS como lenguaje de una serie de capacadidades extra. Entre ellas por ejemplo -la mas notoria al menos- la posibilidad de utilizar variables para almacenar datos (por ejemplo un color) y reutilizarla una y otra vez.

Pero si esto te parece poco LESS te dotara de Mixins, reglas anidadas, operaciones y un montón de cosas.

Veamos un pequeño ejemplo de un codigo CSS hecho con LESS:

Source code

@nice-blue: #5B83AD; @light-blue: @nice-blue + #111; 
#header { color: @light-blue; }

Es claro que como se ve en el ejemplo podemos utilizar la variable light-blue con el elemento que nosotros queramos. Esto es sin duda maravilloso. Los mixings serían algo de este calibre:

Source code

.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; }

Aquí en cierta forma hemos definido una “propiedad” que luego podemos utilizar dentro de otro elemento! Esta seria la forma:

Source code

#menu a { color: #111; .bordered; } .post a { color: red; .bordered; }

Lo cual devolvería claro algo como esto:

Source code

#menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black; } .post a { color: red; border-top: dotted 1px black; border-bottom: solid 2px black; }

Que son los valores que hemos seteado a bordered.

Pueden descargar el archivo JS aquí y ya mismo comenzar a utilizarlo en sus Webs.