Produire efficacement du CSS avec LESS et PHP

Le 14 octobre 2011 — par

Il fallait absolument que je vous parle de LESS sur ce blog, car ce « langage » a littéralement changé ma vie de développeur Web depuis presque un an maintenant.

LESS est la contraction de Leaner CSS, et le terme est faible.

Il vous permet, grâce à l’inclusion d’un fichier JavaScript dans l’entête du fichier HTML, de transformer un fichier .less écrit comme ceci :

En un fichier CSS entièrement lisible par tous les navigateurs, comme cela :

Comme vous pouvez le voir, c’est donc extrêmement pratique ! Qui n’en a pas marre de répéter X fois les parents de tel élément, alors qu’il serait bien plus simple d’imbriquer les déclarations. Ou encore d’utiliser des variables, et surtout des fonctions qui permettent de gérer facilement toutes les dépendances des navigateurs.

Tout ceci paraît magique, mais si vous avez bien lu, il y a un point faible : L’interprétation se fait à chaque chargement par le fichier JavaScript qui doit être inclus dans l’entête. Fasciné par LESS mais ne voulant pas sacrifier les performances, j’ai mis au point une solution hybride qui me débarrasse de ce JavaScript.

L’idée est de transformer le LESS en CSS non pas chez le client, mais directement sur le serveur. Pour cela on va tout d’abord ajouter ces lignes dans le .htaccess, pour rediriger les .css inexistants (et qu’on suppose donc des fichiers .less à transformer) vers notre script PHP :

Le script PHP prend donc la relève. À noter que vous aurez besoin de lessphp, et notamment lessc.inc.php, qui sert à transformer les fichiers LESS non plus via JavaScript mais via PHP.

Le script va vérifier l’existence d’un fichier déjà transformé dans son cache (changez le dossier data/cache si ça ne vous correspond pas) avec les dates de modifications du fichier principal et des éventuels fichiers inclus (via @import), et s’il n’existe pas, le créera puis le délivrera.

Conclusion, on peut utiliser la puissance de LESS et se débarrasser de l’exécution JavaScript en rajoutant du cache côté serveur. On combine ainsi puissance et rapidité de développement. Croyez-moi, une fois que vous aurez goûté à LESS, vous ne pourrez plus vous en passer :)

En bonus, voici quelques fonctions que j’installe à chaque fois que je démarre un nouveau projet :

Pour en savoir plus, consultez la documentation officielle : LESSCSS.org. Attention, certaines fonctions ne sont peut-être pas disponibles via lessphp (mais vous pouvez toujours proposer des patches).

S'abonner au flux RSS du blog
Recevoir les nouveaux articles par e-mail :