Et quand je pose la question du pourquoi, à côté de réponses parfois évasives reviennent systématiquement les mêmes idées reçues : pas d’intérêt, peu fiable, manque de compatibilité, peur de la ligne de commande ou pas envie d’apprendre encore un nouveau langage…

L’idée de cet article a donc tout naturellement germé. Non pour vous convaincre de la nécéssité de se pencher sur ces préprocesseurs mais, à tout le moins, pour lever un peu le voile et vous permettre de les voir (enfin) sous un autre angle…

Mais avant d’allez plus loin, une première question : qu’est-ce qu’un préprocesseur ?

En informatique, un préprocesseur est un programme qui procède à des transformations sur un code source, avant l’étape de traduction proprement dite (compilation ou interprétation).
[wikipedia]

Dans le cas qui nous concerne, les préprocesseurs CSS sont donc des langages dont le but principal est d’ajouter des fonctionnalités (toutes plus cools les unes que les autres) à CSS. Le code créé est ensuite compilé en langage CSS classique qui peut être utilisé dans n’importe quel navigateur.

Car si CSS est un langage très simple à la base, un enfant de 12 ans est à même de le pratiquer facilement, sa mise en oeuvre peut vite s’avérer complexe et fastidieuse :

• Augmentation du nombre de fichiers
• Quantité croissante de règles et répétitions
• Propriétés CSS3 propriétaires
• Compatibilité et débogage cross-browser
• Collaboration avec d’autres développeurs
• Performance dans le navigateur
• …

Heureusement, les préprocesseurs CSS arrivent à la rescousse !

Pas besoin d’être un expert ou un ninja mais vous devez connaître CSS. Sans cela, vous risqueriez de provoquer plus de dégats qu’autres choses.
Gardez à l’esprit qu’il s’agit avant tout d’un outil supplémentaire, facile à prendre en main qui, bien utilisé, vous permettra d’améliorer votre processus de travail.
Personnellement, j’y ai également trouvé un nouveau souffle, une nouvelle façon de coder qui m’a permis de redécouvrir CSS autrement.

Si vous êtes réfractaires au terminal et à la ligne de commande, ce n’est pas un problème. En effet, vous trouverez facilement des applications avec une interface graphique vous permettant d’installer aisément le préprocesseur de votre choix (Less.app, Winless, Scout, CodeKit, …).

A noter également que de nombreux framework CSS (Bootstrap, Zurb Foundation, …) possèdent une version « préprocesseur ».
Et que Sass, couplé à Compass, vous permet, par exemple, la génération automatique de sprites CSS avec les classes et positions de background qui vont bien… 🙂

Voici donc quelques unes de ces super fonctionnalités !

Nesting

On a souvent besoin de faire référence à des éléments multiples possédant le même parent dans notre CSS.
Et cela peut vite être fastidieux de répéter encore et encore ce même parent.
Les préprocesseurs vous permettent de faire cette économie en imbriquant simplement vos règles de style.

Code SASS

    section {
      margin: 10px;
     
      nav {
        height: 25px;
     
        a {
          color: #0982C1;
       
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }

Code CSS généré

    section {
      margin: 10px;
    }
    section nav {
      height: 25px;
    }
    section nav a {
      color: #0982C1;
    }
    section nav a:hover {
      text-decoration: underline;
    }

Conseil : Attention à ne pas alourdir inutilement vos sélecteurs à l’arrivée avec un usage abusif des imbrications… Ne dépassez jamais quatre niveaux !

Variables

Si l’on peut se réjouir de l’arrivée des variables en CSS qui permettront d’éviter la répétition de nombreuses valeurs (couleur, marge, …), il faut se rendre à l’évidence : ce n’est pas pour demain et le « rechercher/remplacer » a encore de beaux jours devant lui…
Et bien non ! Les variables, c’est maintenant !

Code SASS

    $mainColor: #0982c1;
    $siteWidth: 1024px;
    $borderStyle: dotted;
     
    body {
      color: $mainColor;
      border: 1px $borderStyle $mainColor;
      max-width: $siteWidth;
    }

Code CSS généré

    body {
      color: #0982c1;
      border: 1px dotted #0982c1;
      max-width: 1024px;
    }

Operations et fonctions

Dans le même ordre d’idée, pas besoin d’attendre patiemment l’implémentation de calc() dans votre navigateur préféré (qui a dit IE ?). Les opérations sont au menu avec, en option, des fonctions sur les couleurs !
Additionnez ou multipliez vos marges et vos paddings, convertissez vos tailles de texte du pixel vers le em, éclaircissez ou assombrissez vos couleurs ou encore calculez automatiquement leur valeur complémentaire…

Code SASS

    $width: 24px;

    body {
      margin: ($width / 2);
      top: $width + 100px;
      right: 100px - 50px;
      left: 10 * 10;
    }

    $color: #0982C1;
 
    a {
      color: $color;

      &:hover {
        color: darken($color, 50%);
    }

Mixins

Cette fonctionnalité permet la réutilisation de propriétés tout au long de votre feuille de style. Plutôt que d’avoir à passer en revue votre feuille de style et de modifier une propriété à plusieurs reprises, il suffit de changer l’intérieur de votre mixin. Cela peut être très utile pour un style spécifique ou la gestion des propriétés préfixées. Lorsque les mixins sont appelés à partir d’un sélecteur CSS, les arguments sont reconnus et les styles appliqués à l’intérieur du sélecteur.

Code SASS

    @mixin border-radius($radius) {
      -webkit-border-radius: $radius;
      -moz-border-radius: $radius;
      -ms-border-radius: $radius;
      -o-border-radius: $radius;
      border-radius: $radius;
    }

    .box {
      @include border-radius(5px);
    }

Imports et minification

L’importation de plusieurs feuilles de styles, indispensable sur le plan de la maintenabilité ou du travail en équipe, peut s’avérer très pénalisante en terme de performance avec la multiplication des requêtes HTTP.
L’importation via un préprocesseur fonctionne différemment car elle s’effectue lors de la phase de développement au moment de la compilation. Il en résulte la création d’un seul fichier CSS. En outre, mixins et variables peuvent être importés et utilisés dans votre feuille de style principale ce qui vous permet de créer des fichiers séparés pour une organisation optimale.

Code SASS

    @import "normalize";
    @import "mixins";
    @import "typography";
    @import "theme";

A noter que le code CSS produit peut être minifié, améliorant encore un peu plus les performances de votre site…

Cet aperçu n’est évidemment pas exhaustif. Je n’ai pas parlé ici de la possibilité d’émettre des tests avec des conditions, de réaliser des boucles ou encore de l’utilisation de @extend…

Bref, vous l’aurez compris, chaque préprocesseur CSS a sa propre façon d’accomplir la même tâche : donner aux développeurs la possibilité d’utiliser des fonctionnalités non supportées et utiles, tout en maintenant la compatibilité avec le navigateur ainsi que la clarté et la lisibilité du code.

Bien que n’étant pas indispensables pour le développement (loin s’en faut), les préprocesseurs permettent d’économiser beaucoup de temps et d’améliorer grandement votre workflow pour des projets de moyenne et grande envergure.

En devenant webdesigner, vous avez tacitement accepté de vous tenir informé des nouveaux trucs cools.
Ceci est est un nouveau truc cool… ^_^

Je vous encourage donc tous à essayer sans tarder un préprocesseur, quel qu’il soit. Les plus couramment utilisés actuellement sont Sass, LESS et Stylus qui se valent et le web regorge d’articles ou de tutoriels pour démarrer.