Chapitre 6 : Utilisation des préprocesseurs CSS avec Drupal

Le CSS, ou cascading stylesheet, constitue le moteur des interfaces graphiques des sites depuis plus de dix ans. Comme tout langage, il évolue néanmoins. Dans sa version actuelle, il reste relativement strict et permet assez peu de souplesse notamment au niveau de la réutilisabilité du code. C’est à ce niveau que les préprocesseurs CSS interviennent ! Les principaux, SASS et LESS sont totalement compatibles avec Drupal via des modules simples à installer et à mettre en œuvre.

Ecriture du CSS en 2 étapes

La génération du CSS se fait alors en deux temps. Un premier fichier est écrit dans un métalangage (LESS ou SASS) permettant l’utilisation de nombreuses fonctions : variables, mixins et héritage sont alors à l’honneur. Une fois ce fichier réalisé, Drupal compile et fournit une version en CSS du code au navigateur qui saura l’interpréter comme si de rien n’était.

Utilisation de LESS

Dans le cas de LESS l’intégration est très simple : un module du même nom, couplé avec le module libraries et la librairie de compilation lessphp, se chargera de la traduction du fichier .less en .css en un clin d’œil.

Utilisation de SASS

préprocesseurs CSSDu côté de SASS l’affaire se corse, même si le jeu en vaut largement la chandelle ! Il est en effet nécessaire d’installer dans un premier temps SASSY, qui chapeautera la compilation des fichiers au format CSS. Malheureusement il n’est pas autonome et nécessite, comme au-dessus, l’installation du module libraries auquel il sera nécessaire d’adjoindre la librairie de compilation PHPSASS. Finalement pour faire le lien entre SASSY et PHPSASS un dernier module sera nécessaire : PREPRO. Ce dernier se chargera de la compilation demandée, mettra le fichier en cache et gèrera le routage. Tout ce petit monde se configure dans le backend de Drupal en un clin d’œil. Quel que soit votre choix, arrivé à ce stade, le préprocesseur est prêt à recevoir les requêtes et à fournir une version optimisée.

Avantages-clés pour l’annonceur

Avec les préprocesseurs CSS, le gain en temps, la réutilisabilité et la modularité du code sont énormes et permettent d’apporter souplesse et créativité aux sites ! Et ça tombe bien, Drupal, via ses modules, est parfaitement compatible avec leur utilisation ! De quoi offrir à l’annonceur flexibilité et réduction des coûts dans la gestion de son site.