Acelerar la creacin de sprites con Less

CSS
febrero 11th, 2012 Se lee en 2 minutos.
Uno de los primeros proyectos a los que me enfrent, luego de tomar Less CSS como parte de mis
herramientas de trabajo, requera el uso de sprites css, por lo que [extraamente] pens que sera divertido
pensar en una forma de hacerlo mejor utilizando less.
Un sprite css es una coleccin de imgenes, iconos en este caso, unidos en una nica imagen para luego
crear clases CSS que muestren nicamente el estilo que necesitamos. El objetivo de los sprites css
consiste en reducir la cantidad de imgenes a cargar, porque al reducir peticiones al servidor se acelera la
velocidad de carga.
Es mejor una imagen de 100kb que 10 imgenes de 10kb.

Crear la imagen
El primer paso es crear una imagen con los iconos a utilizar, en este caso la imagen es de 300x120px y
cada icono ocupa 60x60px, es decir que tendremos 10 iconos en la imagen. Utilizar los iconos de
IconSweet2 y marcar los espacios de cada icono en Photoshop usando la extensin GuideGuide
(recomendada).

Definir el namespace y mixins para los iconos en less

Lo que sigue a continuacin es definir los estilos base para los iconos, por ejemplo la imagen que usar,
las medidas de los iconos con variables y para facilitar el uso de los iconos ms adelante agregar un
mixin (elegir) que permitir elegir que icono usar unicamente por la posicin que ocupa.

Se agregan dos clases ms para posicionar los iconos

y por ltimo el mixin que se encargar de elegir el icono dentro de la imagen. A este mixin de le
enviar como parametro qu icono se usar, por ejemplo elegir(2, 0) usar el icono 2 de la fila 0.

Utilizar el sprite

Con los estilos anteriores hemos definido un namespace para cargar los iconos de la imagen, ahora para
usarlo simplemente agregaremos las clases en el HTML y luego en la hoja de estilos base (style.less).

HTML
El HTML bsicamente es un conjunto de parrafos <p> con clase tiempo1, tiempo2, etc. con un elemento
span dentro de clase icono, este elemento ser el encargado de contener la imagen.

style.less
En los estilos definimos que cada icono dentro clase tiempo1, tiempo2, etc. cargu un icono diferente.
Adems le indicamos la alineacin que debe tener usando las clases que ya definimos

Y listo, al tener estos estilos definidos podremos usar los iconos dentro de nuestra pgina web. Para el
ejemplo mont los estilos sobre una plantilla de Foundation y se ve as:

Puedes descargar ver los archivos del ejemplo en Github: uptoeleven-lesscss.

Actualizacin: Tambin puedes ver un ejemplo de sprites CSS en Less usando un mixin para los iconos:
icons.less (Gist).

Aunque no parezca sencillo realmente lo es, y de hecho es un gran avance dentro del manejo de estilos.

Publicado en Diseo web | Comenta

Etiquetado como diseo web, less, sprites css, up211less, uptoeleven

Artculos relacionados:

Mixins Y eso con qu se come?

Cmo usar #namespaces en Less CSS

Qu es LESS CSS y cmo funciona

por Ivn E. Mendoza

Comentarios

Deja un comentario
Tu correo electrnico no ser publicado.
Nombre *
Correo electrnico *
Comentario
El blog imposible de diseo