J’aime bien utiliser compass en ce moment. Et le fait qu’il soit présent sur la version 1.6 de Prestashop n’y est pas pour rien je pense.

Aujourd’hui je vais vous montrer comment créer automatiquement un sprite; avec en cadeau une petite astuce à la fin pour avoir un nom de fichier propre pour le sprite généré ;).

Le but de cet article n’est pas de vous présenter compass ou de vous montrer comment l’installer, mais comment utiliser le sprite-generator.

Si vous avez compass dans votre projet, vous devriez avoir un fichier config.rb, somme toute basique, comme celui ci :

css_dir = "css"
sass_dir = "scss"
images_dir = "img"

line_comments = false
sourcemap = false

Jusqu’ici rien d’extraordinaire, on défini nos dossiers, et pour la démo, j’ai les commentaires et les sourcemap de désactivés.

J’ai une arbo qui ressemble à ça :

Ensuite qu’est-ce qu’on fait ?
Déjà, on importe le fichier _icon.scss dans style.scss
@import "icon";

Et c’est ensuite dans le fichier _icon.scss que la magie va opérer:

@import "compass/utilities/sprite";
@import "icon/*.png";
@include all-icon-sprites

Quelques explications:
Dans un premier temps on ajoute « compass/utilities/sprite », c’est ce qui nous permet de construire le sprite.
Dans un deuxième temps on défini la source de nos images, ici ce sera tout les .png qui sont dans le dossier /icon/ (pas besoin de préciser /img/, c’est déjà défini dans le fichier config.rb)
Et finalement on inclus la mixin qui va nous générer les classes qui vont biens 🙂

Bien entendu, la mixin n’est pas dans le projet, c’est compass qui la met directement à disposition, mais si vous utilisez compass vous, connaissez le truc 😉

Petite précision sur l’appel de cette mixin tout de même: son nom ne sera pas toujours « all-icon-sprite », cela dépend du nom du dossier où vous avez placé vos icons.

Par exemple si vous un dossier /img/glyph, vous devriez avoir un fichier plutôt comme celui-ci :

@import "compass/utilities/sprites";
@import "glyph/*.png";
@include all-glyph-sprites;

Cela permet d’avoir plusieurs sprite différents si besoin 😉

Et ensuite ?
Bah c’est tout.
Sans options particulières on peut directement lancer un
compass compile

Qu’est-ce que ça donne ?
On voit un fichier icon-{hash}.png (icon-s4db2abfc30.png cette fois-ci par exemple) à la racine de /img/ qui se créer; c’est notre sprite.
(Le hash à la fin du fichier est un cachebuster, il changera à chaque génération du sprite)

De plus si on regarde du coté du notre style.css on voit que des classes avec le nom de différents icons on été également généré:

.icon-sprite, .icon-bl-after, .icon-bl-before, .icon-user {
  background-image: url('/img/icon-s4db2abfc30.png');
  background-repeat: no-repeat;
}
.icon-bl-after {
  background-position: 0 0;
}
.icon-bl-before {
  background-position: 0 -14px;
}
.icon-user {
  background-position: 0 -28px;
}
.icon-user:hover, .icon-user.user-hover {
  background-position: 0 -42px;
}

Vous remarquerez également que si on a un fichier qui est suffixé de « _hover » , le hover est automatiquement généré également.

On est déjà pas mal, mais on peut aller plus loin en ajoutant quelques options. Personnellement, je préfère les sprites avec des icons moins serrés. Pour ajouter de l’espacement, il vous suffit d’ajouter des options au début de votre fichier _icon.scss.

//delete sprite image when change one of these value
$icon-spacing: 20px;

@import "compass/utilities/sprites";
@import "icon/*.png";
@include all-icon-sprites;

Si vous changer des options, pensez bien à supprimer le sprite d’origine.

Voici donc le sprite généré :

Pour le reste des options, je vous laisse consulter la documentation :
http://compass-style.org/help/tutorials/spriting/customization-options/

C’est cool, mais jusqu’ici il y a pas vraiment d’astuce, et vous pouvez retrouvez tout ça dans la documentation.

Le soucis c’est le cache busters qui est ajouté à la fin du fichier, c’est pleins de bonnes intentions, mais moi ça m’embête un peu ^^

La documentation nous apporte un paramètre à ajouter dans le fichier config.rb pour supprimer ce cachebuster :
asset_cache_buster :none

Mais rien n’y fait, cela n’a pas d’incidence sur le nom du fichier créé…

Alors que faire ?

J’ai trouvé différentes solutions sur le net, malheureusement aucune n’a fonctionnées pour moi, sauf une.

Et du coup pour éviter que vous ne la cherchiez, et parce que je suis un gars sympas, la voici :
(dans votre fichier config.rb)

css_dir = "css"
sass_dir = "scss"
images_dir = "img"
line_comments = false

sourcemap = false
#returns a url to the sprite image

module Compass::SassExtensions::Functions::Sprites
  def sprite_url(map)
    verify_map(map, "sprite-url")
    map.generate
    generated_image_url(Sass::Script::String.new(map.name_and_hash))
  end
end

#change sprite filename
module Compass::SassExtensions::Sprites::SpriteMethods
  def name_and_hash
    "sprite-#{path}.png"
  end
  def cleanup_old_sprites
    Dir[File.join(::Compass.configuration.generated_images_path, "sprite-#{path}.png")].each do |file|
      log :remove, file
      FileUtils.rm file
      ::Compass.configuration.run_sprite_removed(file)
    end
  end
end

#change name inside icon.scss
module Compass
  class << SpriteImporter
    def find_all_sprite_map_files(path)
      glob = "sprite-*{#{self::VALID_EXTENSIONS.join(",")}}"
      Dir.glob(File.join(path, "**", glob))
    end
  end
end

J’ai ajouté quelques commentaires pour y voir plus clair, mais concrètement on renomme simplement le nom du fichier est on change automatiquement l’appel à ce fichier dans le css.

Ce qui nous donne cette arbo :

Je trouve ça quand même plus propre.
Source : https://gist.github.com/boldfacedesign/10109132