Le générateur de sprites de Compass 0.11.3¹ crée des images dont le nom a pour format <map>-<hash>.png où <map> correspond au nom du répertoire qui contient les images du sprite et -<hash> à un hash qui :

• assure l’unicité du fichier généré ;
• fait office de cache buster.

Seulement voilà, chaque modification de sprite (par un ajout ou décalage d’image par exemple) va générer une image avec un hash différent², ce qui rend la gestion du dépôt d’un projet versionné assez prise de tête.
Heureusement, il est possible de ruser.

Pour ce faire, il suffit d’implémenter les callbacks on_sprite_saved et on_stylesheet_saved dans le fichier de configuration du projet, comme suit :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#
# config.rb
#
 
# Réaliser une copie des sprites avec un nom dépourvu du hash d'unicité.
on_sprite_saved do |filename|
  if File.exists?(filename)
    FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
  end
end
 
# Remplacer dans les feuilles de styles générés les références aux sprites par
# leurs équivalents dépourvus du hash d'unicité.
on_stylesheet_saved do |filename|
  if File.exists?(filename)
    css = File.read filename
    File.open(filename, 'w+') do |f|
      f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')
    end
  end
end

Ainsi, après chaque génération de sprite par Compass, une copie de l’image dépourvue du hash d’unicité est réalisée. Cela s’accompagne bien évidemment par un remplacement de leurs appels dans les feuilles de styles.
Il ne reste plus qu’à ignorer les images ayant un hash au niveau de votre repository pour ne pas polluer ce dernier.

Je suis conscient qu’il y aurait plus secure (je pense notamment aux substitutions dans les feuilles de style), mais disons que cela me convient dans l’immédiat, et qu’accessoirement je ne fais pas de ruby

Continuez votre lecture sur des sujets similaires

• Instances multiples de Compass avec Ruby Version Manager (rvm)
• Drupal 6 : utiliser une iframe comme contenu de page
• Optimiser le chargement des AdSense
• WordPress : autoriser l’upload de fichiers au format non-supporté
• Rotation des logs Apache

Dans le cadre de mon travail à Clever Age j’utilise dans plusieurs projets Compass, le framework Sass, dans sa version 0.10.6. Mais voilà, cette version a laissé place à la branche 0.11 qui, malheureusement, s’accompagne de son lot de mixins obsolètes voire de bugs avec certaines extensions.

Mes nouveaux projets feront appels à la dernière version en date de Compass mais il me faut conserver une branche 0.10 sur mon poste pour assurer le support des anciens projets. Il est actuellement inconcevable de proposer aux clients une mise à jour des fichiers SCSS vers la branche 0.11.

Comment faire cohabiter les deux versions de Compass et leurs dépendances ? C’est là qu’intervient Ruby Version Manager, un gestionnaire d’environnements pour Ruby.

Installer RVM

L’installation de RVM est des plus simples : il suffit de suivre la documentation.
Je préfère installer RVM pour l’utilisateur courant (moi) et non pour tous les utilisateurs du poste, qui n’auront pas les mêmes besoins. Accessoirement, cela me permet de manipuler les gem sans invoquer sudo.

$ cd
$ bash < <(curl -sk https://rvm.beginrescueend.com/install/rvm)
$ echo '[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm" # Load RVM function' >> ~/.bash_profile
$ source .bash_profile
$ type rvm | head -1
rvm is a function

J’en profite pour installer la dernière version stable de Ruby :

$ rvm install 1.9.2
Installing Ruby from source to: /Users/mehdi/.rvm/rubies/ruby-1.9.2-p180, this may take a while depending on your cpu(s)...

ruby-1.9.2-p180 - #fetching 
ruby-1.9.2-p180 - #downloading ruby-1.9.2-p180, this may take a while depending on your connection...
…
Installing rubygems dedicated to ruby-1.9.2-p180...
…
Installation of rubygems completed successfully.
ruby-1.9.2-p180 - adjusting #shebangs for (gem irb erb ri rdoc testrb rake).
ruby-1.9.2-p180 - #importing default gemsets (/Users/mehdi/.rvm/gemsets/)
Install of ruby-1.9.2-p180 - #complete 

À ce point, la version de Ruby active sur le système est pourtant celle fournie par Apple (je suis toujours sous OSX :p) :

$ ruby -v
ruby 1.8.7 (2009-06-12 patchlevel 174) [universal-darwin10.0]

En effet, RVM a bien réalisé l’installation de Ruby 1.9.2 mais il faut déclarer explicitement notre souhait de l’utiliser en remplacement de la version système¹ :

$ rvm use 1.9.2 --default
Using /Users/mehdi/.rvm/gems/ruby-1.9.2-p180
$ ruby -v
ruby 1.9.2p180 (2011-02-18 revision 30909) [x86_64-darwin10.7.0]

Installation de la dernière version en date de Compass

Classique, l’installation de Compass se fait via gem :

$ gem install compass
Fetching: sass-3.1.1.gem (100%)
Fetching: chunky_png-1.2.0.gem (100%)
Fetching: fssm-0.2.7.gem (100%)
Fetching: compass-0.11.1.gem (100%)
Successfully installed sass-3.1.1
Successfully installed chunky_png-1.2.0
Successfully installed fssm-0.2.7
Successfully installed compass-0.11.1
4 gems installed
Installing ri documentation for sass-3.1.1...
Installing ri documentation for chunky_png-1.2.0...
Installing ri documentation for fssm-0.2.7...
Installing ri documentation for compass-0.11.1...
Installing RDoc documentation for sass-3.1.1...
Installing RDoc documentation for chunky_png-1.2.0...
Installing RDoc documentation for fssm-0.2.7...
Installing RDoc documentation for compass-0.11.1...
$ gem list

*** LOCAL GEMS ***

chunky_png (1.2.0)
compass (0.11.1)
fssm (0.2.7)
rake (0.9.0)
sass (3.1.1)

Une petite vérification d’usage :

$ compass version 
Compass 0.11.1 (Antares)
Copyright (c) 2008-2011 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

Ok, mon environnement par défaut est prêt. Voyons comment faire cohabiter une ancienne version de Compass.

Création d’un Gemset dédié à l’ancienne version de Compass

En premier lieu, je me positionne sur l’environnement ruby voulu. Ici, il s’agit du Ruby que j’ai défini par défaut.

$ rvm default
$ rvm gemset name
/Users/mehdi/.rvm/gems/ruby-1.9.2-p180

Recherchons la dernière version de la branche qui m’intéresse² (0.10 pour rappel) :

$ gem query -ran ^compass$

*** REMOTE GEMS ***

compass (0.11.1, 0.11.0, 0.10.6, 0.10.5, 0.10.4, 0.10.3, 0.10.2, 0.10.1, 0.10.0, 0.8.17, 0.8.16)

Ok, il me faut la 0.10.6.
RVM donne accès à des gemsets qui sont des espaces cloisonnés de gems pour une version de Ruby donnée. Pratique, j’ai justement besoin d’isoler les gems de la version 0.10.6 de Compass à celles de la dernière version en date.

Je crée un gemset au nom assez explicite et l’utilise :

$ rvm gemset create compass0.10.6
$ rvm gemset use !$
$ rvm gemset name
compass0.10.6

La création d’un gemset fourni un nouvel environnement vierge de gems (ou presque, rake restant disponible) :

$ gem list

*** LOCAL GEMS ***

rake (0.9.0)

Je peux maintenant installer Compass 0.10.6³, ses dépendances et autres extensions en toute tranquillité.

$ gem install compass --version 0.10.6 --no-rdoc --no-ri
Fetching: haml-3.1.1.gem (100%)
Fetching: compass-0.10.6.gem (100%)
Successfully installed haml-3.1.1
Successfully installed compass-0.10.6
2 gems installed
$ gem list

*** LOCAL GEMS ***

compass (0.10.6)
haml (3.1.1)
rake (0.9.0)

La petite vérification d’usage :

$ compass version
Compass 0.10.6
Copyright (c) 2008-2009 Chris Eppstein
Released under the MIT License.

Installer l’extension Lemonade pour Compass 0.10.6

Il ne me reste plus qu’à installer l’extension lemonade que j’utilise dans mes projets :

$ gem install lemonade --version '< 0.3.5' --no-rdoc --no-ri
…
4 gems installed

J’installe ici la version strictement inférieur à 0.3.5 de lemonade car cette dernière lève directement une erreur pour indiquer que la gem lemonade est désormais dépréciée au profit de Compass Sprites. Le hic étant que ce dernier n’existe pas dans Compass 0.10.6.

Malheureusement, la gem de lemonade ne précise pas les bonnes versions de ses dépendances, et, de ce fait, on se retrouve avec un environnement incapable de générer les images des sprites. Pour corriger cela, on commence par downgrader la version de chunky_png :

$ gem uninstall chunky_png --version 1.2.0
$ gem install chunky_png --version '< 1.0.0' --no-rdoc --no-ri
…
1 gem installed  

La gem haml installée avec l’extension lemonade est incompatible avec Compass 0.10.6 et risque de générer une erreur du genre :

compile scss/screen.scss
  error scss/screen.scss (Line 2087: Not a valid color stop: #bcd712 74%)

Il suffit donc d’installer la dernière version de la branche 3.0 :

$ gem install haml --version '< 3.1' --no-rdoc --no-ri
$ gem uninstall haml --version 3.1.1
$ gem list

*** LOCAL GEMS ***

chunky_png (0.12.0)
compass (0.10.6)
fssm (0.2.7)
haml (3.0.25)
lemonade (0.3.4)
rake (0.9.0)
sass (3.1.1)

Utilisation

Par défaut, en ouvrant un shell, Compass sera disponible en version 0.11. Si j’ai à travailler sur un projet en 0.10 il me suffit d’ouvrir un nouveau shell et d’activer temporairement le gemset compass0.10.6 :

$ rvm gemset use compass0.10.6

À l’avenir, je maintiendrai à jour la version de Compass dans l’environnement par défaut et, si besoin est, je figerai dans un nouveau gemset la version de Compass devenu obsolète.

Continuez votre lecture sur des sujets similaires

• Compass : supprimer le cache buster des sprites
• PHP : installer APC sous Mac OS X Leopard
• Rotation des logs Apache
• TextMate : bundle CSS, commande "Convertir la sélection en Unicode"

La propriété CSS content qui s’utilise de concert avec les sélecteurs :before ou :after, sert essentiellement pour enrichir¹ le rendu d’un contenu HTML existant. Pratique, ajouter un petit en rythme après le texte « j’aime coder » ne pose aucun problème. Cependant, si nous sommes amenés à insérer des caractères non-ASCII ça se complique.

Chercher la représentation Unicode d’un caractère

La représentation Unicode d’un caractère peut se trouver de plusieurs manières :

• en perdant son temps dans la table des caractères Unicode ;
• en s’aidant d’une extension Firefox sic ;
• via la palette des caractères de Mac OS X, en survolant le caractère à insérer. Son code Unicode s’affiche alors dans l’infobulle.

Affichage de la représentation Unicode d’un caractère.

Dans notre feuille de styles, nous insérons le nombre héxadécimal récupéré préfixé du caractère d’échappement \, sans oublier de supprimer toute pollution comme 0x0. Nous obtiendrons ainsi :

• ♫ : \266b
• ⌘ : \2318

Ce qui se traduit dans une CSS par :

a:after {
  content:"\266b";
}

Nous arrivons à nos fins, mais ne pourrait-on pas accélérer le processus ?

Un coup de TextMate

Rien de plus simple avec TextMate. Téléchargez et décompressez l’archive qui suit². Double-cliquez sur le fichier tmCommand pour l’installer.

La nouvelle commande Convert Selection to Unicode est maintenant disponible dans le bundle CSS et s’active par le raccourci clavier ⌃⇧X sur tout caractère ou texte sélectionné.

Une astuce pour la route

L’espace insécable (entité caractère  ) s’insère au clavier via le raccourci clavier ⌥ + Espace et a pour représentation Unicode \A0.

Ressources

• Blog & Blues : Feuilles de style, jeux et codage de caractères.
• nanoum blog : before et after

Continuez votre lecture sur des sujets similaires

• Compass : supprimer le cache buster des sprites
• Instances multiples de Compass avec Ruby Version Manager (rvm)
• Photon : guide d’installation sur Mac OS X Snow Leopard
• Bundle License Helper pour TextMate
• TextMate : commande « Export words »