Pour le projet sur lequel je travaille, je suis amené à utiliser Twitter Bootstrap qui est un bienheureux mélange de css et de javascript vous permettant de rendre votre site plutôt « Touchy » en 3 fois rien de temps. La distribution de Bootstrap dispose de ses fichiers Css mais aussi des fichiers LESS qui ont servi à les générer. Je ne m’en étais pas particilèrement ému jusqu’à ce que Stéphane, mon collègue, m’incite à y regarder de plus près pour éviter de m’enm……comme je le faisais. Je me suis donc penché sur LESS qui permet de passer de règles aussi lisibles que :
@color: #4D926F;
@white: #FFF;
#header {
color: @color;
h1
{
background-color: @color;
color: @white;
span
{
display: none;
}
}
}
h2 {
color: @color;
}
en :
#header {
color: #4d926f;
}
#header h1 {
background-color: #4d926f;
color: #ffffff;
}
#header h1 span {
display: none;
}
h2 {
color: #4d926f;
}
… ce qui pour l’exemple, ne parait pas plus simple forcément, mais, la différence se sera sur un site entier. D’autant que je n’ai pas mis en oeuvre la minification pour préserver la lecture.
Vous en saurez plus en lisant la suite de l’article et comprendrez tout l’intérêt de passer vos développement Css en LESS…
C’est quoi LESS?
LESS vient de LessCss et est un language très proche de css (qui est la finalité) et qui contient des directives et résumés permettant de se simplifier la création du css par l’automatisation de bon nombres de tâches et de rêgles. Vous trouverez plus d’informations sur le site de présentation de LESS : http://lesscss.org
Parmi les principales fonctions de LESS, on notera :
- Les variables – pouvoir définir vos couleurs repère (@fond-commun: #FCF;) ou vos tailles de pixel (@thumbnail-image-largeur:120px;
- Les mixins – des espèces de propriétés raccourcies comme on souhaiterait que .box-shadow(12px) définisse tous les tags -box-shadow, -moz-box… et -webkit-bo… d’un seul coup en collant 12px de valeur
- Nested rules – imbriquer les règles parent > enfant comme en html et retrouver l’applat css comme d’habitude (voir exemple au dessus)
- Les fonctions et opérations – souhaiter que:
.thumbnail-image-importante-largeur:@thumbnail-image-largeur * 2
WinLess
« J’ai un peu regardé la doc… on me parle de ruby, de javascript client, de Rhino et Nodes.js, de binaires serveur… mais comment je fait sous Windows ? »
A cette question simple (que je me suis posé), je vous répond tout simplement : WinLess.
WinLess a le double avantage de compiler simplement vos scripts LESS et de les minifier au passage. Il est capable de surveilleur plusieurs répertoires et de régénérer automatiquement les fichiers Css dès qu’il détecte qu’un fichier LESS a changé. C’est magique !
Et sous Visual Studio ?
C’est la dernière étape car bien entendu, Visual Studio ne fait pas -encore?- ce qu’est un fichier LESS.
Il faut donc installer l’extension LessExtension pour bénéficier à minima de la gestion graphique dans l’éditeur. Vous aurez quand même l’intellisense, la vérification de certaines règles, les nested rules (l’imbrication des règles comme dans l’exemple plus haut), la coloration syntaxique, le folding d’une règle, et (mais je n’ai pas testé car j’utilise aussi Dreamweaver) la possibilité de les compiler directement via dotless. Seul souci, il ne s’adapte pas aux thèmes sombres de Visual Studio.
Donc ?
Voilà, un petit tour d’horizon des solutions LESS sous Windows et Visual Studio en particulier. Il faudra garder aussi un oeil sur SimpLess (compilateur).
La solution me semble plaisante, rapide, efficace et bien outillée pour pouvoir rentrer dans un pipeline professionnel. Elle apporte un réel gain.