mercredi 20 novembre 2013

CSS : Faire plus avec LESS

LESS

Le concept de préprocesseur est à la mode. Nous n'avons qu'à penser à TypeScript et CoffeeScript pour le Javascript. Haml pour le HTML et son équivalent pour le CSS, nommé SASS. LESS en est un pour le CSS, inspiré de SASS. Contrairement à celui-ci, LESS est de source et syntaxe Javascript plutôt que Ruby. Chaque ligne de code est interprétée et transformée en CSS régulier.

Plutôt que d'écrire des CSS statiques, LESS étend les fonctionnalités du CSS, en lui ajoutant des notions dynamiques, ce qui allège la code source et simplifier la compréhension. Il peut être roulé sur le serveur, un préprocesseur logiciel doit être installé, ou directement sur le poste client.

Afin de développer des feuilles de style efficacement, LESS ajoute de la structure et des notions de programmations ce qui accélère la réalisation et la maintenance du rendu visuel des applications. On peu ainsi, créer des variables, des fonctions et utiliser des références à des fonctions existantes de la plateforme.

Un exemple d'utilisation de variables :
Avant lors de l’édition
@color: #4D926F;
#header {
  color: @color;
}
h2 {
  color: @color;
}


Après,  lorsque compilé
#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}


Des extensions pour LESS sont disponibles pour la majorité des éditeurs populaires afin faciliter sont utilisations.  Pour vous amuser, il y a un éditeur en ligne disponible : http://less2css.org/

Liens