Préprocesseurs

Les préprocesseurs sont des langages qui ajoutent au CSS des fonctionnalités des langages de programmation, comme les variables, fonctions, test et boucles.

Ces langages n’étant pas compatibles avec les navigateurs, il est nécéssaire de les faire traiter par un processeur lequel les transforme en CSS. D’où le nom de ces langages, les préprocesseurs.

Il existe de nombreux langages de préprocesseurs, comme SCSS/SASS, LESS ou stylus.

exemple : SCSS

// on défini la variable $couleur
// et on lui assigne la valeur
// rouge : 255
// vert : 0
// bleu : 0
// opacité : 1
$couleur: rgba(255, 0, 0, 1);

.exemple {
  // couleur du texte
  color: $couleur;

  // couleur de fond : 40% plus lumineux
  background-color: lighten( $couleur, 40% );

  // liseré inférieur : 40% plus sombre
  border-bottom: 2px solid darken( $couleur, 40% );
}

Donnera en CSS :

.exemple {
  color: red;
  background-color: #ffcccc;
  border-bottom: 2px solid #330000;
}