Ajouter LESS à un site Drupal existant

logo lesscssLESS est un langage dynamique pour écrire des CSS. C’est une surcouche en quelques sortes. Cela ajoute ce qui manque aux CSS : les fonctions, les variables, l’imbrication des instructions principalement. L’autre compilateur/language du même style est SASS. Ce sont 2 très bons outils, le choix vous appartient. Pour avoir fait quelques recherche, on trouve pas mal de librairies (type bootstrap, etc) qui utilisent LESS, d’autre part, le site de LESS est plus clair et beau, et lecompilateur est simple à intégrer, notamment dans Drupal. J’ai donc choisi LESS.

Avantages de LESS

  • Le code CSS existant est compatible LESS => excellent pour passer à LESS progressivement.
  • Le code CSS généré ne contiendra que le code nécessaire, meme si le less en contient plus (fonctions, variables).
  • les commentaires // sont utilisables, et ne sont pas contenus dans le code généré => on peut se lâcher un peu plus sur les commentaires (vrai si vous ne compressez pas vos CSS avec Drupal, car dans ce dernier cas, les commentaires sont supprimés de toutes façons.)
  • Centraliser les codes couleurs principaux de votre site (c’est là que je me suis aperçu que parfois, nos codes couleurs n’étaient pas les mêmes à un chouilla près, en ajoutant LESS, j’ai pu uniformiser !)
  • Organiser ces feuilles CSS en « modules » est d’autant plus simple.

Inconvient

Le seul que je vois vraiment serait l’obligation de compiler ces feuilles CSS.
Dans Drupal, le module LESS résoud le souci et ça se fait de manière transparente.
Hors Drupal, le compilateur LESS (module node.js) propose un mode « watch », à démarrer une fois le matin en arrivant. Et les IDE proposent pour la plupart l’intégration de LESS.

Migrer vers LESS

Etant donné la facilité de mise en oeuvre, ça ne vaut pas la peine de s’en priver, d’autant que la migration vers LESS peut se faire progressivement !

Installation

1. Installer le module less

drush dl less
drush en less

2. La doc du module le dit très bien : il faut ajouter la librairie requise lessphp

Télécharger la librairie tierce et la déposer dans sites/all/libraries/lessphp/

Régler les settings en mode DEV, mais pas forcément en mode « watch », qui lance de nombreuses requêtes Ajax en boucle, polluant la console Network de votre navigateur. D’autant qu’il suffit de recharger son navigateur, ce qu’on a l’habitude de faire…

Passer à LESS : le vif du sujet

Le plus complexe est d’aller retrouver tous les ajouts de feuilles CSS : si vous respectez bien les bonnes pratiques, ils doivent être faits par drupal_add_css ou un render array, avec une clé [‘#attached’][‘css’][‘ma_feuille.css’] = array(weight, compressed, …). Ou alors, il peut être chargé dans le .info de votre module.

Dans les 3 cas, il suffit d’aller ajouter l’extension « .less » pour chaque fichier chargé : à faire dans le code PHP/.info + renommer le fichier correspondant.

Ensuite, si vous rechargez votre page (un petit drush cc all peut être utile le 1er coup, surtout si vous avez modifié un « .info »), observez votre inspecteur de chrome ou firefox (onglet Réseau), vous verrez que vos fichiers CSS sont désormais nommés avec une clé md5 en plus. Ce sont vos fichiers LESS compilés. Chaque fois que vous modifierez votre LESS, il sera recompilé (en DEV, si le mode est actif).

Organisation

Parfois, plusieurs fichiers CSS sont chargés sur la même page. En compression/aggregation activée, ils seront rassemblés par Drupal.
Vous pouvez le faire aussi avec LESS désormais, en ayant un fichier principal (global.css par ex), puis à partir de ce fichier, importer les autres LESS devant être présents sur la page. Il en résulte un seul fichier CSS.
Ce peut être utile pour centraliser certains imports, par exemple les feuilles étant utiles à l’ensemble du site (header, footer, common, etc.)

Mais le plus intéressant ici est plutôt d’ouvrir les possibilités : LESS permet d’éclater une feuille CSS en plusieurs LESS traitant un sujet particulier (menu, footer, header, contenu, que sais-je…)
Pour un développeur, c’est sympa de pouvoir d’autant plus structurer ses développements CSS.
Drupal n’inclut qu’un seul CSS, mais vous, en LESS, vous pouvez gérer plusieurs fichiers LESS.

Allons un peu plus loin : les font web d’icones

Pour améliorer encore la gestion des couleurs, de plus en plus de sites proposent des polices de caractères de type font-web dont chaque caractère représente une icone. Ces icônes sont donc vectorielles et peuvent être mises en formes comme le serait un texte (taille, couleur, relief, etc.).
D’autre part, une seule font est téléchargée plutôt qu’un ensemble d’icones PNG ou un sprite qu’il faut modifier avec un logiciel à chaque ajout d’icone.

L’inconvénient est que la plupart de ces fonts sont assez lourdes, contenant énormément d’icônes, dont peu servent au final.
MAIS… un outil génial existe pour parer à ça : http://fontello.com
C’est exactement ce que je cherchais, un générateur de fonts ne contenant QUE les icônes dont on a besoin. En plus, il agrège plusieurs sites proposant des fonts, donc dispose d’un nombre incroyable d’icones ! En avant première, le créateur m’a dit qu’il prévoyait prochainement la possibilité d’importer ses propres fonts !

Encore plus fort, il permet le téléchargement d’un ZIP contenant CSS et fonts (déjà génial en soit), mais en plus, un JSON contenant ce que vous avez téléchargé, votre configuration, autrement dit.
Le prochain coup, il est simple d’importer ce JSON sur le site Fontello, et retrouver sa sélection pour en ajouter d’autres, ou modifier sa sélection. C’est simplement génial et futé !

 

  • stephane

    Merci, faut il laissez dans « performance » la sélection agréger et compresser les fichiers CSS cochée?

  • Etienne

    Désolé du retard ! Oui, la feuille LESS est d’abord convertie en CSS (ou les feuilles) et ensuite seulement, sont aggrégées et compressées.
    Donc rien à changer de ce côté là !