Dans un précédent tutoriel, je vous expliquais comment utiliser SASS, idéal pour organiser et améliorer la lisibilité de votre CSS. Aujourd’hui c’est au tour de Compass, de son installation et de son utilisation de passer à la casserole.
Compass, en quelques mots…
Ce framework, qui se base sur SASS, va vous permettre d’améliorer votre productivité en matière d’intégration.
L’installation de Compass : 3, 2, 1, partez !
Comme avec SASS, il est important d’avoir Ruby d’installé sur la machine sur laquelle vous comptez utiliser Compass.
Pour l’installation de COMPASS, tout se passe dans le terminal/invite de commande.
La commande à copier/coller est la suivante :
gem install compass
Ensuite, restez dans le terminal, et tapez cette commande :
compass create assets
Celle-ci va créer un dossier assets contenant 2 dossiers et un fichier «config.rb» :
Vous pouvez créer les dossiers « images » et « javascripts » si vous décidez d’utiliser des images et du javascript dans votre site.
Ensuite, il ne faut plus utiliser la commande « sass » mais la commande « compass » :
compass watch assets
(assets étant le nom de notre dossier créé plus haut)
Vous l’aurez compris, c’est dans le dossier «sass» que vous placerez vos fichiers SASS. Les fichiers «css» générés se trouveront dans le dossier « stylesheets ».
Passons à la configuration
Si vous décidez de modifier le nom de l’un des dossiers de votre projet Compass, il va falloir l’indiquer à Compass en passant par le fichier « config.rb ».
Nous avons 5 variables d’initialisés ici mais sachez qu’il en existe beaucoup plus. Pour des explications complètes, je vous laisse allez voir la documentation COMPASS .
Les sprites
Un sprite est une image regroupant plusieurs icônes/images utiles à votre intégration.
Utiliser un sprite permet de charger une image au lieu de plusieurs, ce qui augmente les performances de votre site.
Compass peut générer les sprites automatiquement. Il suffit de créer un dossier qui va contenir toutes vos images dans le dossier « images ».
Pour que la suite, n’oubliez de lancer la commande « compass watch assets »
Maintenant, il faut indiquer à Compass que vous voulez générer un sprite. Pour cela, il suffit d’aller dans votre fichier SASS et d’écrire ce code :
@import "icons/*.png"; @include all-icons-sprites;
Ces deux commandes indiquent que vous importez toutes les images (png) du dossier « icons » (se trouvant dans le dossier « images ») et que vous voulez générez un sprite avec ces images.
Si vous retournez dans votre dossier « images », vous remarquerez qu’un nouveau fichier est apparu : c’est notre sprite.

Pour utiliser ce sprite, il faut taper le code suivant :
@include icons-sprite(trash);
Cette ligne génère tout le CSS nécessaire pour obtenir l’icône voulu. « trash » fait référence au nom du fichier ajouté dans notre dossier « icons », par exemple « trash.png »
Dès que vous ajoutez une image dans votre dossier « icons », le sprite se régénère.
Des questions, des remarques, des bugs lors de l’installation de Compass ou au cours de son utilisation ? N’hésitez pas à le faire savoir ou à faire un tour sur le site de Compass.
Sommaire