Créer des CSS dynamiques avec LESS : un compilateur de CSS en Ruby
17 juin 2009
Ca peut paraître bizarre comme outil, un « compilateur de CSS », mais LESS est avant tout un outil pour écrire plus efficacement une CSS. Ca rend les CSS dynamiques. C’est un outil écrit en Ruby. J’en parle aussi d’ailleurs sur 29minparjour.
LESS = extension de CSS
LESS se veut être une extension de CSS parce que la syntaxe utilisée pour les fichiers .less (les fichiers source) est très proche de la syntaxe CSS. L’efficacité de cet outil consiste en 4 éléments :
- Variables en CSS
- Mixins : des includes CSS
- Nested Rules : une autre façon de définir des sélecteurs d’arborescence
- Operations : addition, soustraction, multiplication, division
Variables CSS
En utilisant des variables, on peut regrouper une valeur à un seul endroit pour pouvoir la mettre à jour facilement par la suite.
@maCouleurPrincipale: #0072bc;
a{ color:@maCouleurPrincipale;}
h1{ color:@maCouleurPrincipale;}
Mixins : des includes CSS
Dans une classe, je peux définir plusieurs propriétés puis inclure cette classe dans d’autres éléments. Ca peut s’avérer très pratique pour les propriétés CSS 3 qui ont une syntaxe différente par navigateur.
.coinsArrondis{ border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
#global{ .arrondis;}
Nested Rules
Cet outil est le moins intéressant des 4. Il permet de gagner un peu en lignes de code mais je ne le trouve pas très lisible.
#header{
background:#fff;
position:relative;
.logo{
position:absolute;
right:0px;
}
}
Au lieu d’écrire #header puis #header .logo, je mets directement .logo dans #header.
Opérations
Ca permet d’utilisation des opérations arithmétiques traditionnelles : addition, soustraction, multiplication, division. Ca peut-être pratique si on veut que les marges verticales soient le double des marges horizontales.
@marges:5px;
#global{ margin:@marges*2 @marges;}
Exemple complet
J’ai fait un exemple complet utilisant plusieurs fonctionnalités de LESS. Voici mon fichier source bbxdesign.less :
@color01:#0072bc;
@radius:10px;
.radius{ border-radius:@radius; -moz-border-radius:@radius; -webkit-border-radius:@radius;}
@margin:5px;
body{ color:#333; font-family:Georgia,serif;}
a{ color:@color01; text-decoration:none;}
#global{ background:#fff; .radius; margin:@margin @margin*2;}
Et voici le fichier généré bbxdesign.css :
.radius { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
a { text-decoration: none; color: #0072bc; }
body { font-family: Georgia,serif; color: #333; }
#global { -webkit-border-radius: 10px; margin: 5px 10px; background: #fff; -moz-border-radius: 10px; border-radius: 10px; }
Installation
Tout se fait en lignes de commande. Il faut avoir Ruby installé sur son ordinateur et installer la gem suivante :
gem install less
Ensuite, en navigant dans le dossier où se trouve le fichier .less, on fait :
lessc monfichier.less
Et le fichier .css est automatiquement généré avec le même nom.
Nom de fichier différent
On peut aussi choisir un autre nom pour le fichier généré :
lessc monfichier.less monautrefichier.css
Automatisation
Parce qu’un fichier CSS est souvent modifier, on peut automatiser la création du fichier .css à chaque modification du fichier .less :
lessc monfichier.less --watch
D’ailleurs, si une erreur existe dans le code, le fichier .css ne serait pas généré. Bien pratique.
Conclusion
Il existe plusieurs méthodes pour avoir des CSS dynamiques. J’en ai déjà vues en PHP ou JSP. Mais ces outils génèrent souvent les CSS à la volée, et il faut donc avoir un serveur derrière qui tourne. Ici, le fichier est « compilé » une bonne fois pour toutes.
Autre avantage : la syntaxe de LESS est très proche de la syntaxe CSS. Il est très facile de prendre une CSS existante et la transformer en fichier LESS. Ca m’a pris 2min d’ailleurs.
Après, est-ce que je vais l’utiliser au quotidien ? Ecoutez, je vais essayer.
