À quoi servent les préprocesseurs dans le développement ?

Les préprocesseurs CSS (Sass, Less, Stylus) étendent les fonctionnalités du CSS en ajoutant :

• Variables : Permettent de stocker des valeurs (couleurs, polices) pour une utilisation répétée.

  // Variable en Sass
  $primary-color: #3498db;
  
  body {
    color: $primary-color;
  }
  

• Nesting (Imbrication) : Permet d'imbriquer des règles CSS les unes dans les autres, reflétant la structure HTML.

  // Imbrication en Sass
  nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
  
      li {
        display: inline-block;
      }
    }
  }
  

• Mixins (Mixins) : Permettent de réutiliser des groupes de déclarations CSS.

  // Mixin en Sass
  @mixin clearfix {
    &::after {
      display: table;
      content: "";
      clear: both;
    }
  }
  
  .container {
    @include clearfix;
  }
  

• Fonctions : Permettent d'effectuer des calculs et de traiter des valeurs.

  // Fonction en Sass
  $grid-columns: 12;
  
  @function grid-width($n) {
    @return ($n / $grid-columns) * 100%;
  }
  
  .col-6 {
    width: grid-width(6);
  }
  

• Importation : Permet de diviser le CSS en modules et de les inclure dans le fichier principal.

  // Import en Sass
  @import "variables";
  @import "mixins";
  
  body {
    font-family: $base-font;
  }
  

Cela améliore l'organisation du code, réduit sa duplication, augmente la lisibilité et accélère le développement. En fin de compte, le préprocesseur compile le code en CSS normal, compréhensible par les navigateurs.