📘 Chapitre 8 – Introduction aux préprocesseurs CSS

1. 🎯 Objectif pédagogique

Comprendre le rôle des préprocesseurs CSS (comme SASS ou LESS), découvrir leurs fonctionnalités de base (variables, imbrication, mixins) et savoir pourquoi ils facilitent l’écriture du CSS.

2. 📚 Concepts abordés

  • Définition et utilité des préprocesseurs CSS
  • Variables et imbrication de sélecteurs
  • Fonctions et mixins simples
  • Différence entre CSS natif et CSS compilé
  • Introduction à SASS comme exemple

3. 🧠 Explication théorique

Les préprocesseurs CSS ajoutent des fonctionnalités absentes du CSS classique, comme les variables, les fonctions, et la possibilité d’imbriquer les règles pour une meilleure lisibilité. Le code écrit en SASS ou LESS doit être compilé pour produire un fichier CSS standard lisible par le navigateur.

Exemple SASS :

$couleur-principale: #3498db;

button {
  background-color: $couleur-principale;
  color: white;
  &:hover {
    background-color: darken($couleur-principale, 10%);
  }
}

Après compilation, ce code génère du CSS classique :

button {
  background-color: #3498db;
  color: white;
}
button:hover {
  background-color: #2d83c1;
}

4. 🛠 Tutoriel pratique

Résumé du travail : Découvrir SASS en écrivant un code avec variables et imbrication, puis générer le CSS compilé.

Arborescence du projet :

mon_projet/
├── index.html
├── style.scss
└── style.css (après compilation)

Étape 1 : Exemple HTML simple 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Préprocesseurs CSS</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <button>Cliquer</button>
  </body>
</html>

Étape 2 : Exemple SCSS 

$couleur-principale: #e74c3c;
$rayon-bordure: 5px;

button {
  background-color: $couleur-principale;
  border: none;
  padding: 10px 20px;
  color: white;
  border-radius: $rayon-bordure;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: darken($couleur-principale, 10%);
  }
}

Étape 3 : Compilation en CSS

Utiliser la commande (si SASS est installé) :

sass style.scss style.css

5. 🧾 Résumé et points-clés

  • Les préprocesseurs (SASS, LESS) ajoutent des fonctionnalités puissantes au CSS.
  • Les variables et l’imbrication réduisent la répétition du code.
  • Le code doit être compilé avant utilisation dans le navigateur.