Connaissez-vous LESS ? Il s’agit d’une sur-couche de CSS apportant son lot d’améliorations pour faciliter l’écriture de feuille de styles. LESS vous permettra par exemple de définir des fonctions ou des variables que vous pourrez utiliser dans vos règles CSS. Pour en savoir plus, n’hésitez pas à consulter le site officiel de LESS.

Pour utiliser LESS sur vos sites internet, vous devez « convertir » vos fichiers LESS en CSS afin que les styles soient interprétés par les navigateurs web. Le site officiel propose deux solutions, soit réaliser la conversion côté client avec le navigateur, soit côté serveur avec nodejs. La 1ère solution rend votre site web dépendant l’activation de Javascript par le visiteur, ce qui n’est pas une très bonne idée. J’ai donc choisi la solution « serveur »…

Installation de NodeJS et LESS

Nous allons voir ici comment installer NodeJS et le module less sur Mac OS X 10.6 (et 10.7) avec MacPort. L’installation de MacPort devra préalablement être réalisée.

  1. Commencez par installer NodeJS avec MacPort en utilisant la commande suivante :
    port install nodejs
  2. Installez maintenant NPM avec la commande ci-dessous. NPM est un gestionnaire de packages/modules pour Node permettant de facilité l’installation de modules.
    sudo port install npm
  3. Une fois l’installation de NPM terminée, procédons à l’installation du module LESS pour NodeJS. A noter la présence du « -g » dans la commande afin de précéder à une installation globale (pour tous les utilisateurs)
    sudo npm install less -g
  4. Vous avez terminé l’installation de NodeJS, NPM et LESS

Utilisation

Écrivez un fichier less. Vous pouvez prendre un exemple du site officiel par exemple.

lessc styles.less

Conclusion

Voilà, vous êtes maintenant fin prêt pour l’utilisation de LESS dans vos projets web. Je vous recommande de faire un tour sur GitHub où vous trouverez des fichiers LESS pour facilité l’utilisation CSS3 sur les principaux navigateurs.

Personnellement, j’utilise LESS depuis presque 1 an et c’est un réel plaisir d’écrire des styles CSS avec un tel outil. Essayez-le !


3 commentaires

Youp3 · 30 août 2011 à 23:20

Et si on veut l’utiliser sur un serveur qui tourne sous Windows ? J’ai un peu l’impression que ce cas n’est pas prévu après avoir rapidement parcouru leur site.

    Fabien · 1 septembre 2011 à 06:25

    Il me semble d’effectivement NodeJS n’est pas compatible avec Windows.
    Sinon, il y a d’autres parsers less en PHP, Ruby & co

Armando · 2 juin 2016 à 09:55

Excellent billet

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

:D :) :o :eek: :( :lol: :wink: :arrow: :idea: :?: :!: :evil: :p

Articles similaires

Développement

Installer Apache 2, MySQL 5 et PHP 5.3 sur Mac OS 10.7 Lion avec MacPort

Bien que Apache et PHP soient pré-installés sur Mac OS X, j’évite depuis plusieurs années de les utiliser. Au départ pour un problème de compilation d’une extension PHP, aujourd’hui pour ne plus être dépendant d’Apple Lire la suite…

Développement

Utiliser l’extension Taggable de Doctrine avec Symfony 1.3/1.4

Jusqu’à symfony 1.2, si vous vouliez ajouter facilement de nouvelles fonctionnalités au framework PHP5 il fallait se diriger vers son importante base de plugins. Avec symfony 1.3 et 1.4, bien sûr vous pouvez toujours compter Lire la suite…

Développement

Critique du livre « Symfony 1.3 Web Application Development »

Il y a quelques semaines, l’éditeur PacktPublishing m’a proposé d’écrire une critique de son livre fraichement sorti intitulé « Symfony 1.3 Web Application Development » et écrit par Tim Bowler et Wojciech Bancer. Comme son nom l’indique, Lire la suite…