Utiliser SASS dans ses projets WordPress

Sass est devenu pour moi un outil du quotidien. Je l’utilise dans presque tous mes projets. Le fait est que je travaille beaucoup avec WordPress. Il est donc devenu évident qu’il fallait que je développe une méthodologie pour le faire entrer dans ces projets-ci. Aujourd’hui je vous propose de découvrir de quelle manière intégrer Sass dans vos projets WordPress.

Un thème WordPress nécessite normalement 1 seul et unique fichier CSS, à la racine : style.css. Mais tout mettre au kilomètre dans ce fichier c’est la garantie de rendre le projet difficile à maintenir et à faire évoluer. C’est pourquoi on préfèrera découper son design en modules. Plusieurs méthodologies existent, mais celle qui fait sens à mes yeux se rapproche de SMACSS. Je vous invite à aller faire un tour sur leur site, on y apprend des choses très intéressantes sur les manières possibles de découper son design CSS.

La puissance des préprocesseurs CSS n’est plus à démontrer : ils nous permettent de s’affranchir des préfixes vendeurs, d’apporter de la logique dans nos feuilles de styles, de séparer proprement notre architecture, bref, de tout calibrer au plus juste sans se répéter. C’est la méthode DRY (Don’t repeat yourself). Globalement, on gagne en productivité, en stabilité, on limite les régressions et en plus on s’éclate. Que demander de plus ?

Sass embrasse parfaitement cette philosophie du DRY et de la scalabilité. Mais pour l’installer sur WordPress comment ça se passe ?

Premièrement, il faut avoir déjà installé et configuré les outils sur sa machine. Dans mon cas, j’utilise le framework COMPASS. Il est réputé pour être l’un des plus complets avec une palette de mixins très étendue, et même si pas mal lui reprochent d’être assez lourd / lent à la compilation, de mon point de vue c’est à la marge. Car si vous n’avez jamais utilisé SASS / COMPASS, il faut savoir que le code que vous générez est compilé à la volée en fichier css standards.

Je pars du principe que les personnes qui lisent cet articles ont déjà COMPASS d’installé et sont prêts à se lancer.

Pour démarrer le projet (thème ou plugin) en mode SASS, il suffit d’initialiser un projet COMPASS à la racine. Si je construit un thème, j’ouvrirai le terminal à la racine de mon thème et je taperai :

A la suite de quoi, je me retrouve avec un fichier config.rb, ainsi que 2 nouveaux dossiers : sass et stylesheets. Le dossier sass est celui dans lequel on va travailler à l’avenir, mais avant, il faut aller un peu plus loin :

Les fichiers scss contenu dans le dossier sass vont entrainer la création / modification de leur alter égo css contenu dans le dossier stylesheets, à chaque fois que j’ajouterai / modifierai un fichier scss. Je vais donc devoir demander à compass de se mettre en « écoute », de manière à catcher les modifications au fur et à mesure. Je tape donc dans mon terminal, toujours à la racine de mon thème :

Le watcher est à présent en mode « écoute », et toutes les modifications effectuées dans le dossier sass seront automatiquement compilées dans le dossier stylesheets. Mais cela ne suffit pas. Il faut dès maintenant indiquer à WordPress comment récupérer / lire les fichiers css créés.

Voici la logique que j’applique :

Mon fichier style.css à la racine de mon thème va dès à présent me servir de passerelle, en appelant un seul et unique fichier contenu dans le dossier stylesheets. Bien sûr, la création de ce fichier se passe d’abord dans le dossier sass : je créé un fichier nommé « main.scss », et automatiquement, son copain « main.css » est créé. Il me suffit alors d’importer ce fichier css dans mon « style.css » :

Mais alors, et les autres fichiers aussi il va falloir  les importer ? Oui et non. En fait ce qu’on va faire c’est créer uniquement des fichiers scss qui ne seront pas compilés en fichiers css. Le but n’est pas de remplir le dossier stylesheets, mais de le maintenir avec un seul fichier : notre fameux main.css, et de dire à ce dernier de faire tous les imports des fichiers qu’on va créer par la suite.

Du coup on va préfixer tous nos nouveux fichiers scss avec un underscore « _ ». Par exemple, si je veux un fichier scss dédié à la navigation et un autre à mes modules, je vais les nommer respectivement « _navigation.scss » et « _modules.scss ». De cette manière je suis tranquille, je sais qu’ils ne seront pas compilés en css. Il ne reste plus qu’à les importer dans l’ordre qui nous convient, dans le fichier main.scss (qui lui ne possède pas d’underscore, et est donc compiler en main.css).

Voici ce que j’écris dans mon main.scss :

Première chose à noter, j’importe les fichiers en les appelant par leur nom, sans l’underscore et sans leur extension. C’est tout à fait normal. De plus je n’utilise pas « url(nom du fichier) », je met directement le nom de mon fichier entre guillemets, et c’est tout ! L’import de « compass » est nécessaire mais non obligatoire : le fait d’utiliser le compilateur de COMPASS ne vous oblige nullement à utiliser les mixins fournies, mais bon, ce serait dommage de se priver 😉 Pour ma part je recommande de ne pas importer COMPASS entièrement, mais de sélectionner les outils qui vous intéressent. Je vous laisse jeter un oeil à la documentation de compass à ce sujet.

Si on récapitule :

j’ai un fichier style.css qui importe le fichier main.css, qui lui même est issu de la compilation de main.scss, et c’est dans main.scss qu’on importe autres feuilles de style scss. C’est aussi simple que ça ! Les modules importés sont préfixés d’un underscore, de manière à ne pas générer un fichier css pour rien, mais de tout centraliser grâce à un seul et unique fichier : main.scss

C’est ainsi que je procède dans mes projets, une fois que tout est en place, il ne me reste qu’à lancer mon watcher et tout se fait dans le dossier sass à la racine du thème. On ne peut faire plus simple, enfin pas tant que les navigateurs ne parleront pas autre chose que du css 😉