LESS CSS sans préprocessing sur le serveur ni sur le navigateur ? Less Now !

Vous connaissez surement LESS CSS de nom. Et vous aussi, tout comme moi durant des années, vous vous dites : « il est vrai que CSS est un peu rustre mais les autres solutions ne sont pas standards, il serait imprudent de bosser avec ». Et comme vous vous doutez bien que l’essayer, c’est l’adopter, puisque les critiques sont toutes positives, alors le plus simple est encore de ne pas l’essayer.

Cela dit ces considérations ne vous empêchent pas de vous tenir au courant et vous voilà en train de lire cet article.

Et vous êtes chanceux car j’ai essayé pour vous.

Ce que LESS apporte aux CSS

LESS permet d’écrire du code CSS sans répétitions.

Par exemple dans les sélecteurs :

En CSS En LESS CSS
.my-block p,
.my-block li {
  text-align: justify;
}
.my-block {
  p,
  li {
    text-align: justify;
  }
}

Pas de répétition dans les valeurs de propriétés :

En CSS En LESS CSS
.my-title {
  color : #cde; /* title color */
}
.other-element {
  color : #cde; /* title color */
}
@title-color: #cde;
.my-title {
  color : @title-color;
}
.other-element {
  color : @title-color;
}

Pas de répétition des groupes de propriétés :

En CSS En LESS CSS
pre {
  text-wrap: wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.other-block {
  text-wrap: wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.wrap() {
  text-wrap: wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
}
pre {
  .wrap;
}
.other-block {
  .wrap;
}

LESS CSS fournit aussi des fonctions de calcul et de manipulation des couleurs (lighten pour éclaircir, darken pour assombrir etc.) dont le but est là-encore de factoriser le code.

Le lecteur trouvera l’ensemble de la syntaxe sur le site de LESS CSS.

Déployer… ou pas

Le préprocesseur LESS CSS est écrit en JavaScript. Il compile du code LESS en CSS. Il peut également « minifier » le code CSS qu’il génère, et depuis que Google s’intéresse à la performance des sites c’est toujours ça de gagné.

Le site officiel de LESS CSS recommande deux méthodes pour utiliser LESS CSS : un préprocessing du côté client sur le navigateur de l’internaute, ou bien du côté du serveur Web. Eh bien aucune de ces deux méthodes n’est intéressante.

Les défauts d’une compilation LESS CSS sur le navigateur :

  1. Un préprocessing sur le navigateur alourdit le chargement et surtout l’affichage de la page Web.
  2. Lorsque le JavaScript est désactivé sur le navigateur, la page n’est plus du tout stylée.
  3. Les robots des moteurs de recherches utilisent le code CSS pour évaluer quel contenu est mis en avant. Toutefois ils ne peuvent probablement pas interpréter le code LESS et les pages Web ne sont donc pas scannées normalement.
  4. Publier un site Web reposant sur une technologie non standard pose un problème de pérennité.

Et du côté du serveur :

  1. L’exécution du compilateur JavaScript demande des installations spécifiques inaccessibles sur les hébergements mutualisés. Notons qu’il existe une implémentation en PHP mais qui représente aussi un risque de s’écarter de la syntaxe LESS, laquelle n’est déjà pas un standard.
  2. Et, de même que pour un préprocessing sur le navigateur, publier un site Web reposant sur une technologie non standard pose un problème de pérennité.

Mais il existe une troisième voie.

Préprocesser sur l’ordinateur de l’intégrateur

Une solution plus élégante est de compiler le code LESS en CSS directement sur l’ordinateur du webmestre. Ainsi c’est la CSS générée qui est déployée et incluse dans le code HTML.

Plusieurs utilitaires font ce travail de compilation : LESS.app est probablement la meilleure référence mais il tourne sur Mac OS uniquement. SimpLESS est orienté Windows, il plaira aux adeptes de la configuration visuelle. Quant à moi je vous suggère Less Now qui fonctionnera à l’identique sur Linux et tous les systèmes d’exploitation disposant d’une machine virtuelle Java. Less Now, on le configure et on l’oublie.

Voici la marche à suivre :

  1. Télécharger Less Now. Installer également une machine virtuelle Java si ce n’est déjà fait.
  2. Créer un fichier de configuration en prenant exemple sur celui proposé, et mentionner les dossiers qui contiennent des fichiers « .less ».
  3. Lancer Less Now et le laisser tourner.
  4. Sans plus de préoccupation, retourner à l’environnement de développement habituel.

Less Now détecte en temps réel toute modification aux fichiers LESS et régénère le cas échéant le fichier CSS correspondant.

Notons que Less Now embarque le préprocesseur LESS CSS officiel qu’il exécute via Rhino, l’interpréteur JavaScript de Mozilla. La syntaxe LESS CSS est donc la bonne.

3 Responses to LESS CSS sans préprocessing sur le serveur ni sur le navigateur ? Less Now !

  1. brcat says:

    Bonjour,
    Merci pour cet article, je l’ai mis en pratique avec lessNow sur un projet que je reprends et qui utilise less et bootstrap, malheureusement, impossible de compiler les fichiers less.
    Il y a un fichier less général dans lequel sont importés d’autres fichiers less dont un fichier de variables utilisé par les fichiers importés.
    J’ai une erreur de type
    [ Envjs/1.6 (Rhino; U; Windows 7 amd64 6.1; en-US; rv:1.7.0.rc2) Resig/20070309 PilotFish/1.2.13 ]
    org.lesscss.LessException: variable @sprite1url is undefined

    Les imports sont fait correctement. Je n’ai trouvé aucune info sur le net qui me permette de résoudre ce pb, si vous avez une idée pour solutionner ce pb elle est la bienvenue. Merci.

  2. Cpag says:

    Bonjour, merci pour le commentaire. Je n’utilise LESS CSS que sur des projets modestes et je n’ai pas encore eu besoin de faire un import. Désolé. :s

  3. Carl says:

    Je me suis mis à LESS aujourd’hui. On se forme en un rien de temps et la souplesse apportée est quand même pas mal. Le fichier CSS gagne en clarté et a maintenance est quand même plus agréable.
    Je n’ai pas réussi à faire tourner LessNow sur ma machine Windows Vista mais SimpLESS est parfait.

Leave a Reply

Your email address will not be published. Required fields are marked *

Mesure anti-spam. Merci de copier le code « PaHFzk » dans le champ ci-dessous :