Less CSS : le CSS en mieux

J’ai découvert il y a quelque temps le langage Less CSS, que j’avais trouvé intéressant. Depuis, j’ai pu le mettre en pratique, et je dois admettre que je suis complètement conquis !

Pourquoi Less

Le langage CSS a finalement très peu évolué depuis la création de CSS1 en 1996. Depuis ces années, le CSS a pris une place plus importante dans le développement des sites web. Rien que sur ce blog, la feuille de style principale fait presque 1000 lignes de code !

Il était grand temps de trouver une solution pour simplifier la création et la maintenance des styles, pour les applications et sites web.

En effet, le CSS souffre d’un mal important : il n’est pas prévu pour limiter la duplication de code. Ainsi un thème qui se base sur quatre couleurs principales devra répéter le code couleur à de multiples endroits. Évidemment, le jour où on voudra le changer, il faudra parcourir 1000 lignes de code. Ce n’est qu’un exemple de la beauté de Less.

En CSS:

  • On ne peut pas réutiliser une partie d’un style pour l’appliquer à un autre.
  • On ne peut pas paramétriser des styles semblables.
  • On ne peut pas déclarer de constantes et les réutiliser.
  • On ne peut pas faire d’opérations simples sur des tailles, des couleurs.

Less permet tout ça, tout en conservant une compatibilité avec le langage CSS. Cela signifie qu’on peut utiliser un vieux style et l’intégrer dans un processus utilisant LESS sans aucun problème.

Compilation LESS > CSS

Les navigateurs ne sachant pas nativement utiliser le langage LESS, il faut passer par une étape de transformation du code LESS en code CSS. On l’appelle compilation. Il existe plusieurs moyen de le faire, suivant les besoins.

  • L’interpréteur officiel less.js, permet d’effectuer cette transformation dans le navigateur (en phase de développement) ou sur le serveur (avec node). Personnellement, les limitations de la version client et le fait que je ne travaille pas avec node font que je ne me sers pas de cette solution.
  • Le compilateur .Net dotLess. Je me sers de cette solution, en l’intégrant aux build events de Visual studio et Monodevelop. De cette manière, les fichiers Less sont compilés à chaque compilation du code, et la solution ASP utilise directement les fichiers CSS minifiés.
  • L’outil SimpLess, qui s’installe sur la machine du développeur. Cet outil scrute les changements dans les fichiers source, et compile les fichiers à chaque sauvegarde. C’est très pratique.

L’autre avantage d’avoir cette transformation vers le CSS, c’est que les compilateurs permettent en général de minifier le code. Pour la mise en production, c’est toujours ça de gagné.

Un peu de Less

Là où Less devient vraiment très intéressant, c’est quand on veut exploiter les propriétés CSS3. En effet, chaque navigateur a apporté sa propre syntaxe pour définir certains effets en attendant une standardisation. Le problème c’est que le code a tendance à s’allonger dès qu’on veut arrondir des coins ou afficher une ombre…


.shadowed(@x: 0, @y: 0, @blur: 0, @spread: 0, @color: #000){
  -moz-box-shadow:    @x @y @blur @spread @color;
  -webkit-box-shadow: @x @y @blur @spread @color;
  box-shadow:         @x @y @blur @spread @color;
}

.foo{
  .shadowed(1px, 1px, 2px, 2px);
}

.bar{
  .shadowed(2px, 2px, 4px, 4px, #BEF);
}

On peut également utiliser des namespaces, rendant la lecture plus facile.

.parentClass{
  .child{
     color: blue;
   }
}

Et le fin du fin : on peut faire des opérations, par exemple sur les couleurs !

// Sur les couleurs
@darkBlue:#006080;
@lightBlue:#BEF;
@middleBlue: mix(@darkBlue, @lightBlue);
@transparentBlue: fadeOut(@darkBlue, 50%);

// Sur des tailles
@width: 300px;
@margin: 5px;

.thing{
  width: @width - 2*@margin;
}

Par exemple, lorsqu’on veut créer des dégradés de couleur, on peut utiliser la fonction mix pour calculer la couleur intermédiaire, affichée dans les navigateurs ne supportant pas cette propriété.

// Exemple d'utilisation
.horizontalGradient(@left, @right){
  // Old browser fallback
  background: mix(@left, @right);

  background: -moz-linear-gradient(left,  @left 0%, @right 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,@left), color-stop(100%, @right));
  background: -webkit-linear-gradient(left,  @left 0%,@right 100%);
  background: -o-linear-gradient(left,  @left 0%,@right 100%);
  background: -ms-linear-gradient(left,  @left 0%,@right 100%);
  background: linear-gradient(to right,  @left 0%,@right: 100%);
  filter: ~"progid:DXImageTransform.Microsoft.gradient( startColorstr='@{left}', endColorstr='@{right}',GradientType=1 )";
}

.foo{
  .horizontalGradient(#000, #AAA);
}

.bar{
  .horizontalGradient(#006080, #BEF);
}

Less partout

Less m’a complètement convaincu, je pense l’utiliser chaque fois que ça sera possible. Son intégration dans le flux de travail est vraiment aisée, soit dans Visual Studio, soit en utilisant SimpLess. Et ça rend la création de styles CSS beaucoup plus simple et beaucoup plus facilement maintenable.

Pour en savoir plus:

Pour info, twitter utilise Less. Leur framework CSS open source, Twitter bootstrap, est écrit en Less. Pour ceux que ça intéresse, ce framework permet de disposer très rapidement d’un thème assez complet lors du développement d’applications web.

Commentaires

6 Comments sur « Less CSS : le CSS en mieux »

  1. Timothep dit :

    On a commencé à utiliser Less au début du printemps et on est conquis ici aussi. On a pas encore vraiment exploré les opérations mais rien que les namespaces par ex. sont déjà une belle amélioration.

  2. Ghusse dit :

    Effectivement, les namespaces sont très utiles.

    Si je devais choisir une fonctionnalité, je pense que je prendrais les mixins : la possibilité de réutiliser (et de paramétriser) des portions entières de CSS.

    Vous faites comment pour intégrer le LESS dans votre processus (compilation) ?

  3. Timothep dit :

    Je t’avoue que je suis plus concentré sur le backend et donc mes rencontres avec le Less se limite plus à du troubleshooting qu’a du dev a proprement parler.

    Pour intégrer Less on utilise tout simplement Mindscape Web Workbench, un plugin pour VisualStudio qui compile les fichiers Less en Css à la volée. Au final on a à la fois les fichers Less et Css sous contrôle de source mais on édite que les Less.

  4. Ghusse dit :

    Je ne connaissais pas l’extension, merci.

    Par contre, je trouve un peu étrange de versionner aussi le CSS.

  5. Timothep dit :

    Ben disons que c’est surtout par flemme de mettre en place un process de compilation des fichiers Less sur le serveur de CI… 😛

Laisser un commentaire