Utilisation de LESS dans la gestion des sprites (tiles)

[cahnory]

Aujourd'hui j'ai eu l'envie de partager avec vous une technique perso facilitant grandement l'utilisation de sprites (à défaut de résoudre tous les problèmes). Toutes critiques, améliorations,... sont les bienvenues.


Disons que nous avons une image contenant toutes les icones de notre site, appelons la "icons.png". Le "nom" ou "identifiant" que nous attribuons à notre sprite sera donc icons. Nous commençons par créer la variable contenant l'adresse de l'image :

@iconsURL: url(path/to/my/image/icons.png);

Ainsi il sera facile de mettre à jour l'adresse en cas de changement ! Il est bien évidemment conseillé de toujours bien penser l'organisation de ses fichiers en amont mais dans le monde réel on est parfois amené à faire des changements imprévus.

La première icone de notre sprite, celle dans le coin supérieur gauche est celle de retour à l'accueil. Elle se situe à la position 0 0, nous le traduisons ainsi :

@iconsXposHome: 0;
@iconsYposHome: 0;

qui peut se résumer ainsi : "sur l'image icons, la position x de home vaut 0, sur l'image icons, la position y de home vaut 0". Jusqu'ici rien de bien compliqué mais aussi rien de bien utile. L'image qui suit est une icone facebook, elle se situe sous l'image de home, 14 pixel en dessous :

@iconsXposFacebook: @iconsXposHome;
@iconsYposFacebook: @iconsXposHome - 14px;

Là, ça commence à devenir intéressant, admettons que l'on ajoute une image au dessus de notre icone d'accueil. En changeant la position de l'accueil nous décalerons automatiquement la position de l'icone facebook. Nous pouvons intercaler et/ou supprimer des images tout en mettant toutes les positions à jour efficacement.

Je ne peut que vous conseiller de compiler vos fichier LESS une bonne fois pour toute. Je déconseille fortement l'utilisation de solution tel que LESSjs qui utilise javascript pour compiler les less en css, le fait que le traitement soit côté serveur n'apporte rien (on ne parle pas de grosse économie sur un calcul qui en théorie ne s'effectue qu'une seule et unique foi) si ce n'est des soucis quand javascript est manquant ou plante pour une raison ou une autre.
Pour compiler vos fichier LESS il existe des solution ruby, php (LESSphp) et même des application qui le feront directement sur votre poste de travaille.

J'espère que cela vous sera utile.