Blog de sonicbyte
Opinión y tendencias sobre negocios, diseño y avances en Internet
LESS: css inteligente que mejora tu productividad
Hace ya tiempo que CSS dejó de ser sólo una forma de agregar algunos estilos básicos en una página web. Hoy ha evolucionado hasta ser una poderosa herramienta para definir no sólo estilos mucho más complejos, sino también para controlar el comportamiento y estructura del layout de nuestro sitio web en todo tipo de dispositivos. Sin embargo, si trabajas en proyectos medianos a grandes, su uso y mantenimiento a veces puede volverse complejo, poco flexible y repetitivo .
Es por esto que se crearon alternativas que complementan al CSS como LESS y SASS que, en resumen, te permiten escribir el CSS que usas todo los días pero con la posibilidad de utilizar variables, funciones y métodos para que tus hojas de estilo funcionen de manera mas inteligente y mejoren tu productividad.
Nativamente ningún navegador soporta éstos formatos claro, es por eso que debes convertirlos a archivos CSS comunes antes de usarlos en producción.
Suena complicado, pero hey, a no asustarse que no es tan difícil como parece, y esto créeme puede aliviar MUCHO tu trabajo diario.
¿Que puedo hacer con LESS?
Mejor que explicar será mostrarte algunos ejemplos rápidos que te permitirá entender su poder, ya que lo que se puede hacer es mucho más de lo que puedo cubrir en este post.
Variables:
En vez de manualmente agregar por ejemplo el color a cada elemento que lo requiera, puedes definir una variable y asignarle un color, luego aplicar la misma a cada elemento que lo necesite (y modificarla en otra regla), si mas tarde necesitas cambiar el color de todo el sitio, sólo debes modificar la variable inicial. ¿No es genial ?
@azul-base: #5B83AD;
//Esta otra variable oscurece el color de la variable anterior en un 20%
@azul-claro: darken(@azul-base, 20);
//Aplicamos la variable al div "header" y la segunda a sus links
#header { color: @azul-base; }
#header a {color:@azul-claro;}
//Resultado CSS
#header {color: #6c94be;}
#header a {color: #36506c;}
Mixins:
Permite agrupar varias lineas CSS de una misma regla y usarla dentro de otras, por ejemplo:
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; }
//Lo usamos dentro de otros elementos
#menu a { color: #111; .bordered; }
.post a { color: red; .bordered; }
//Resultado CSS
#menu a {#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;}
Otro ejemplo clásico de Mixins es para aplicar efectos de css3 como border-radius, box-shadow, etc que requieren muchas líneas de prefijos de distintos navegadores para garantizar compatibilidad. Con LESS los podemos definir una vez y reutilizarlos infinitamente, además puedes usar los llamados “Mixins paramétricos“, donde pasas valores al mismo dinámicamente como si fuese una función de javascript.
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
// Lo implementamos en esta regla y le pasamos el valor dinámicamente
.button {
.border-radius(5px);
}
Puedes ver más ejemplos haciendo click aquí
SASS vs LESS
Comentaba al principio que existe también SASS…¿Cual elegir?, bueno no hay un “vs” realmente en cuanto a potencia, ambos comparten muchas características y casi podría decirse que si sabes usar LESS, sabes usar SASS y viceversa. ¿Cual es su principal diferencia entonces?…
La manera en que son procesados, LESS es una librería basada en javascript, por ende se procesa del lado del cliente (el navegador) para producir el CSS regular que el navegador utiliza, en cambio SASS corre bajo Ruby y se compila del lado del intérprete antes de ser enviado al navegador.
A muchos puede no gustarles los segundos extra que se requiere para que el motor de javascript del navegador procese LESS y lo convierta en CSS común, pero hay alternativas para evitar esto que explicaré luego.
Por otra parte SASS al compilarse por un intérprete Ruby necesitas tener instalado uno para utilizarlo (o algún derivado como Rails), por lo que si no usas ese lenguaje no podrás usar SASS, a menos que tengas una Mac que viene con Ruby de fabrica (sudo gem install sass), por lo que muy probablemente sea mas sencillo si usas pc inclinarte por LESS.
LESS primeros pasos:
¿Cómo lo instalas? Hay dos formas básicamente, o lo procesas “al vuelo” en el navegador o lo puedes compilar antes de subir los archivos a tu sitio (Recomendado)
Usando LESS (compilando en el navegador)
- Descarga LESS de la página oficial: http://lesscss.org
- Enlaza tus hojas de estilo .less con el valor “rel” a “stylesheet/less”.
link rel="stylesheet/less" type="text/css" href="styles.less"
- Incluye el script:
(Asegúrate de incluir las hojas de estilo antes del script)
Personalmente prefiero utilizar el próximo método, para ésto se requiere compilar los archivos LESS a CSS antes de utilizarlos en el sitio web, ésto hace WinLess.
Este programa, gratuito, lo hace casi todo solo. Una vez que instalas el programa y lo abres, debes seleccionar en qué carpeta de tu proyecto estarán tus archivos con extensión .less y voila!…WinLess compilará todos los archivos a CSS cada vez que los modifiques en tu editor html automáticamente, lo cual tiene la ventaja que no tienes que cambiar la forma en que enlazas a tus hojas de estilo en el header, ya que usas los archivos compilados con extensión .css como de costumbre.
Usando LESS (compilado previo a producción)
- Descarga WinLess: http://winless.org/
- Agrega tu carpeta con archivos LESS al programa
- Listo, enlaza los archivos compilados CSS como de costumbre al header de tu página
Mas información:
Less: http://lesscss.org
Sass: http://sass-lang.com
WinLess: http://winless.org
Espero te haya sido de utilidad este post y cualquier consulta no dudes dejar tu pregunta en este mensaje. Hasta la próxima !
-
Victorcoder
-
http://www.sonicbyte.com/equipo/rodrigo-manuel-noales/ Rodrigo Noales
-
http://twitter.com/eduardo_fr Eduardo Flores
-
ivan
