Les préprocesseurs CSS

Bien qu’aidé par de tels outils, la gestion et la maintenance d’un site plus volumineux reste une tâche lourde et fastidieuse à mettre en place. Pour de tels sites, il n’est pas simplement question de créer un ensemble de déclarations CSS, il faut également pouvoir facilement et simplement les architecturer, les décliner, les mutualiser, les étendre, anticiper leur évolutivité, bref tout un ensemble de logiques et de stratégies qui peuvent rapidement devenir complexes à suivre.

De nouveaux types d’outils sont apparus et permettent d’écrire les CSS différemment et plus rapidement. Il s’agit de préprocesseurs CSS qui nous permettent dans un premier temps, d’écrire les CSS de façon optimale, synthétique, optimisée, et dans un second temps, l’outil se charge de les transformer en CSS traditionnelles et surtout compatibles, sans oublier leurs bataillons de préfixes.

Parmi les diverses possibilités, il existe deux principales formules : par exemple SASS qui travaille en amont, c’est-à-dire un outil qui nous demande de compiler les fichiers de travail avant de les placer en production, et LESS qui lui, utilise tels quels, les fichiers de travail et les compile à la volée au moment de les utiliser côté navigateur.

Les deux solutions permettent la même souplesse de travail et produisent les mêmes résultats. Tout n’est qu’une question de préférences. Ce ne sont pas là les seuls outils disponibles. D’autres leur emboîtent le pas, comme Stylus sous node.js ou Compass, qui, s’appuyant sur SASS propose un environnement plus convivial et parfois plus complet, en ajoutant des frameworks comme blueprint ou encore 960.gs.

Jeremy Hixon propose une comparaison dans son article An Introduction To LESS, And Comparison To Sass paru chez Smashing Magazine.

Voyons de plus près le principe de fonctionnement de ces outils. Le plus classique, l’utilisation de variables. Prenons un exemple afin de mieux illustrer ce point. Imaginons une couleur de base, soit rgb(76,102,0) ou son homologue hexadécimal #4c6600… et partons ensuite sur l’idée d’utiliser cette couleur adoucie à 45 % pour les arrières-plan et obscurcie de 5 % pour les bordures et ombrages : rien de plus simple, nous avons simplement besoin d’un outil graphique proposant des réglages TSL et hop le tour est joué.

Là où cela se complique, c’est lorsqu’il nous faut modifier ou décliner ces valeurs, sans parler du cas ou ces valeurs sont utilisées à de multiples endroits et déclarations dans nos CSS.
Avec les préprocesseurs… rien de plus simple. Commençons par créer une variable et utilisons des fonctions là où nécessaire.

Par exemple, en syntaxe optimisée nous pouvons écrire :

$couleur:rgb(76,102,0);
.cible {
   color:darken($couleur,5%);
   background-color:lighten($couleur,45%);
}
.autre {
   border : 1px solid $couleur
}

Et l’outil génèrera pour nous les CSS suivantes :

.cible {
  color: #394d00;
  background-color: #d2ff4d;
}
.autre {
  border : 1px solid #4c6600
}

Vous comprenez combien il est alors facile de pouvoir optimiser son code CSS sans perdre en qualité et robustesse de sortie. Vous imaginez bien que les souplesses ne s’arrêtent pas là, et que ces outils proposent bien plus de fonctionnalités.

Nous avons entre-aperçu l’utilisation de variables, mais il existe aussi un grand nombre de fonctions natives : la possibilité d’imbriquer les déclarations pour en simplifier et en optimiser l’écriture, la possibilité de créer ses propres fonctions qui travaillent avec des arguments, de jouer sur la mutualisation ou encore l’héritage de classe… bref, les possibilités sont multiples et après quelques temps d’utilisation, on comprend vite l’avantage et la nécessité d’utiliser de tels outils.