Crear facilmente un sprite a partir de una carpeta que contenga imágenes.
Crear un sprite a partir de una carpeta que contenga imágenes en ".png", crear clases para cada imagen con el nombre original de la imagen antes de ser convertida en sprite y agregar a cada clase la posición, el alto y ancho de la imagen y el sprite de background.
- Ruby - A dynamic, open source programming language with a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.
- Sass - Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
$ gem install sass - Compass - Compass is an open-source CSS Authoring Framework.
$ gem install compass
Una vez instalado Ruby, Sass y Compass
- Crear carpeta del proyecto con compass :
$ compass create <myproject> - Correr compass watch dentro del proyecto para compilar sass :
$ compass watch - Crear carpeta "img" al mismo nivel que la carpeta "sass"
- Crear carpeta "icons" dentro de la carpeta "img" con las imágenes (".png") que son necesarias para el sprite
- Crear archivo "sprite.scss" dentro de la carpeta de "sass" y poner este codigo:
$icons: sprite-map("icons/*.png");
@each $i in sprite_names($icons) {
.icon-#{($i)} {
background-image: $icons;
background-position: sprite-position($icons, $i);
@include sprite-dimensions ($icons, $i);
}
}Este código generará un sprite con las imágenes deseadas en el mismo nivel que la carpeta "icons" comenzando con el nombre de la carpeta y un guión (en este caso "icons-") seguido por varios números.
Compass compilará los archivos scss y generará el siguiente css con una clase como esta para cada imagen detro del sprite:
.icon-<nombre de la imagen> {
background-image: url('../img/icons-sd9f1472729.png');
background-position: <posición de la imagen (0 0)>;
height: <alto de la imagen en px>;
width: <ancho de la imagen en px>;
}- Documentación de Sass:
- Documentacón de Compass:
- Curso Code School - Assembling Sass Part 2:
- Autor del snippet: Federico Clasing @FedeClasing
- Los snippets pertenecen a KamikazeLab