Débuter avec Sass et Compass

L’avantage d’une période sans emploi, c’est de pouvoir plonger la tête la première dans certains sujets sans craindre de manquer de temps. C’est ainsi que je décide cette semaine de me pencher sur Sass (lien externe) et Compass (lien externe). J’avais déjà pu appréhender le sujet grâce au livre CSS maintenables (lien externe), je n’avais plus qu’à me lancer.

Je commence à me mettre dedans et la première difficulté arrive : la ligne de commande. Outre le fait d’être totalement néophyte sur ce point, il y a quelques pré-requis techniques auxquels il faut répondre.

Paramétrer son poste

En premier lieu, il est nécessaire d’installer Ruby (lien externe) (pour ce qui est des machines Windows en tout cas) et d’effectuer quelques réglages.
Rien de compliqué : il suffit de télécharger la dernière version de Ruby (lien externe) et de lancer l’installation.

Une fois Ruby installé, c’est au tour de Compass. Il faut alors ouvrir l’Invite de commande (sous Windows 7, on y accède depuis le menu Démarrer > Tous les programmes > Accessoires).
À l’ouverture de l’Invite de commande, la ligne commence d’office par quelque chose comme C:\Users\Nom>. Il suffit alors de saisir l’instruction suivante et valider avec la touche « Entrée » :

gem install compass

Note : si Sass peut aussi être installé à part, il n’y a pas besoin de s’en préoccuper car en installant Compass, Sass l’est aussi.

Voilà la partie facile de l’installation passée, il est temps de passer à la création et la configuration d’un projet.

Créer un projet : l’essai

C’est la partie la moins triviale, en particulier si on n’est pas du tout familier de la ligne de commande. Les documentations officielles ne sont pas toujours très claires pour un néophyte, je vais donc tenter de vulgariser le plus possible la description des opérations.

Une fois Compass installé, la création d’un projet se fait avec l’instruction suivante, à rentrer dans l’Invite de commande :

compass create nom-du-projet

Exposé comme ça, ça a l’air très simple. Mais pour quelqu’un qui n’y connaît rien comme moi, une foultitude de questions surgissent alors. Qu’est-ce que cette instruction génère concrètement ? Où est-ce que mon projet se trouve ?

Comme tout un chacun, j’ai effectivement une arborescence propre pour mes projets, dépendante de certaines conventions personnelles. L’une de mes conventions est notamment de ne conserver aucun fichier sur mon PC. Ce dernier étant doté d’un disque SSD de seulement 128 Go, les seules données présentes sur mon poste sont celles des programmes que j’installe et utilise. Toutes mes autres données vont tout droit sur un disque dur externe de travail.

Or, lorsque j’ai testé la création d’un projet « test » avec la commande compass create test, j’ai été bien désappointé de voir que cette commande me crée un répertoire « test » dans mon dossier utilisateur Windows (sur le disque local C:\Utilisateurs\nom-utilisateur). En complément, la création d’un nouveau projet s’accompagne par défaut de la création de différents répertoires et fichiers. On y trouve le répertoire « .sass-cache » et le fichier « config.rb » : le premier est un cache utile à la compilation des fichiers (lorsqu’on convertit le fichier .scss en fichier .css) ; le deuxième est le fichier de configuration du projet. Jusque là, rien d’anormal.

Mais sont aussi créés deux répertoires « sass » et « stylesheets », respectivement pour accueillir les fichiers d’édition et les fichiers de sortie. Et dans ces répertoires sont encore créés des fichiers « ie », « print » et « screen » par défaut.
Moi qui souhaite utiliser Compass sur un projet existant, dont l’arborescence est déjà bien définie et pour lequel j’ai déjà des CSS existantes, me voilà bien embêté !
Mais fort de ce premier essai, je me retrousse donc les manches pour arriver à faire ce que je souhaite : utiliser Compass sur mon projet existant, en l’intégrant pleinement dans mon organisation habituelle.

Intégrer un projet Compass dans un projet existant

À force de recherches et d’expérimentations, je trouve donc le moyen de gérer les fichiers sur mon projet déjà présent.

La première étape consiste à cibler le répertoire de mon projet plutôt que mon dossier utilisateur Windows. Dans mon cas, il s’agit d’un disque dur externe dont la lettre du lecteur est « G ». Je commence donc par changer de lecteur dans l’Invite de commande :

G:

Note : bien évidemment, si vous travaillez sur le disque C, vous n’avez pas à faire cette première manipulation.

L’étape suivante consiste à cibler le répertoire de mon projet. Le mien se trouve dans un répertoire « projet » lui-même dans un répertoire « sites ». Pour le cibler, je rentre la commande suivante :

cd \sites\projet

Ici cd permet de cibler le répertoire.
Il est suivi par le chemin du-dit répertoire. Ce chemin, précédé d’un anti-slash (\), fait référence à la racine de mon lecteur. Notez que contrairement à une URL, l’ensemble des séparateurs de niveau sont des anti-slash.

À ce stade, je suis dans le répertoire de mon projet. Il ne me reste plus qu’à créer mon projet Compass en son sein. Ce que je fais avec l’instruction suivante :

compass create --bare --sass-dir "sass" --css-dir "css"

Décortiquons ça morceau par morceau :

1. compass create consiste donc à créer le projet Compass comme nous l’avons vu plus haut.
2. --bare évite la création des répertoires et fichiers par défaut. Cette instruction est donc essentielle dès lors qu’on a déjà une arborescence de fichiers et qu’on ne souhaite pas la voir polluée par des dossiers et fichiers générés par Compass.
3. --sass-dir définit le répertoire qui accueillera mes fichiers de travail .scss. Il est suivi de la valeur entre guillemets "sass". Cela veut dire qu’un dossier « sass » sera créé à la racine du répertoire de mon projet.
4. --css-dir définit le répertoire qui accueillera mes fichiers .css (qui seront compilés à partir des fichiers .scss). La valeur correspondante est "css". Un dossier « css » sera en conséquence créé à la racine de mon projet. Dans mon cas, un dossier « css » existe déjà. Dans ce cas de figure, l’instruction ne touche à rien et l’information est simplement renseignée dans le fichier de configuration.

Et voilà, en validant cette instruction, mon projet Compass est créé au sein de mon projet global ! Le fichier de config est créé à la racine de mon projet, tout comme les répertoires de travail. Si l’opération se déroule avec succès, vous obtenez un message de confirmation Congratulations! Your compass project has been created... dans l’Invite de commande.

Produire les fichiers CSS avec Compass

Maintenant que tout est prêt pour utiliser Sass et Compass sur mon projet ! Il n’y a plus qu’à créer un premier fichier .scss à compiler pour obtenir mon fichier .css, c’est lui qui sera mis en ligne.

Je crée donc mon fichier que je nomme « style.scss » et que je place dans le répertoire « sass » de mon projet. Pour le compiler et générer mon fichier CSS final, il faut repasser par la ligne de commande. Je saisis dans l’Invite de commande l’instruction suivante :

compass compile

Cette commande a pour effet de compiler l’ensemble des fichier .scss présents dans le répertoire « sass » et de générer leur équivalent .css dans le répertoire « css ».

Note : cette ligne de commande fonctionne si on est situé dans le répertoire de mon projet dans l’Invite de commande. Si on se situe pas au niveau du bon répertoire dans l’Invite de commande, il faut répéter l’opération pour cibler le répertoire du projet. En effet, il faut savoir qu’on est toujours situé dans le répertoire par défaut à l’ouverture de l’Invite. Donc dès lors que vous fermez l’Invite de commande, il faudra cibler à nouveau votre répertoire quand vous vous reconnectez, avant de pouvoir compiler vos fichiers.

Si tout se passe bien, un fichier « style.css » est créé dans mon répertoire « css ». Par défaut c’est en effet le nom du fichier .scss qui est utilisé.

Je sais désormais compiler mes fichiers Sass, mais l’opération est un peu lourde car la commande compile est manuelle. Il faut donc la saisir à chaque fois qu’on veut générer les fichiers CSS. Mais il existe une commande bien pratique qui permet d’automatiser la compilation. Au lieu de l’instruction précédente, il faut saisir :

compass watch

Cette commande a pour effet de compiler automatiquement les fichiers .scss dès lors qu’ils sont modifiés. Une fois qu’elle est saisie, on n’a plus qu’à se concentrer sur l’édition des fichiers Sass et le reste se fait tout seul. 🙂

Nous voilà enfin opérationnels !

Au boulot !

Avec cette introduction aux premiers pas avec Sass et Compass, vous êtes normalement parés à vous lancer !
Même si je n’ai pas encore eu le temps d’aller beaucoup plus loin, je pense que cette première étape de paramétrage est la plus compliquée à passer. J’espère donc pouvoir aider quelques frileux à se lancer et à découvrir cet outil. 🙂

Bien sûr, cet article reste une introduction très vulgarisée.
Même si je n’ai pas pu tester toutes les possibilités de Compass, je sais qu’il existe pas mal d’autres paramètres qu’on peut prendre en compte, ne serait-ce qu’au moment de la création du projet.
Cette introduction a donc avant tout pour objectif de démystifier l’utilisation de la ligne de commande auprès des néophytes et de tenter d’expliquer la logique de base de l’outil.

Comme c’est mon premier article sur ce blog, j’invite aussi les lecteurs qui auront été jusqu’au bout à me faire part de leurs critiques sur le fond comme sur la forme. J’essaierai d’améliorer les choses en conséquence pour les futures publications. 🙂