Chapitre 20 : Introduction aux préprocesseurs CSS

Concepts clés : Extension de la syntaxe CSS via Sass, variables, imbrication, mixins et compilation.

Le CSS standard est un langage puissant, mais lorsqu'un projet grandit, on se retrouve souvent à répéter les mêmes couleurs, les mêmes espacements et les mêmes structures de sélecteurs. C'est ici qu'interviennent les préprocesseurs.

Le concept de Préprocesseur CSS

1. Quoi

Un préprocesseur CSS est un outil de développement qui étend les capacités du CSS standard en y ajoutant des fonctionnalités issues de la programmation (comme des variables, des boucles ou des fonctions).

Le navigateur ne sait pas lire le code d'un préprocesseur. Par conséquent, le code écrit dans le langage du préprocesseur doit être compilé (transformé) en CSS standard pour être interprété par le navigateur.

Le préprocesseur le plus utilisé aujourd'hui est Sass (Syntactically Awesome Style Sheets), principalement via sa syntaxe SCSS (Sassy CSS), qui est un "superset" du CSS : tout code CSS valide est également du code SCSS valide.

2. Pourquoi

Dans un projet professionnel, maintenir un fichier CSS de 5 000 lignes devient vite un cauchemar. Les préprocesseurs résolvent plusieurs problèmes majeurs :

La répétition (DRY - Don't Repeat Yourself) : Au lieu de copier-coller la couleur principale de votre marque sur 50 sélecteurs, vous la définissez une seule fois.
L'organisation : Ils permettent de découper le style en plusieurs petits fichiers (partials) regroupés par thématique (ex: _buttons.scss, _header.scss).
La lisibilité : L'imbrication permet de visualiser la hiérarchie HTML directement dans le code CSS.
La maintenance : Modifier une variable globale met à jour l'intégralité du site instantanément.

3. Comment

A. Syntaxe de base : Les Variables

Les variables permettent de stocker des valeurs réutilisables. En SCSS, elles commencent par le symbole $.

// Définition des variables
$primary-color: #3498db;
$font-stack: 'Helvetica', sans-serif;
$spacing-unit: 1rem;

body {
  font-family: $font-stack;
  color: $primary-color;
  padding: $spacing-unit;
}

B. Cas concret : Imbrication et Mixins

L'imbrication (nesting) et les mixins (blocs de code réutilisables) sont les piliers de l'efficacité de Sass.

// 1. Mixin pour gérer le centrage flexible (réutilisable)
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 2. Mixin avec paramètres pour les breakpoints (Responsive)
@mixin respond-to($breakpoint) {
  @if $breakpoint == "mobile" {
    @media (max-width: 600px) { @content; }
  } @else if $breakpoint == "tablet" {
    @media (max-width: 900px) { @content; }
  }
}

// 3. Application concrète avec imbrication
.card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  @include flex-center; // Utilisation du mixin
  flex-direction: column;

  // Imbrication : on cible .card h2 sans répéter .card
  h2 {
    color: $primary-color;
    margin-bottom: 10px;
    
    // Imbrication profonde : état au survol
    &:hover {
      text-decoration: underline;
    }
  }

  .card-footer {
    margin-top: auto;
    font-size: 0.8rem;

    // Application du mixin responsive
    @include respond-to("mobile") {
      text-align: center;
    }
  }
}

C. Limitations

Bien que puissants, les préprocesseurs ont des limites :

Le temps de compilation : Chaque modification nécessite une étape de transformation avant d'être visible.
Le risque de "Surcharges" (Over-nesting) : Imbriquer trop profondément (ex: 5 ou 6 niveaux) génère des sélecteurs CSS extrêmement longs et spécifiques, ce qui rend le CSS difficile à surcharger et ralentit le rendu du navigateur.
Dépendance à l'outillage : Vous ne pouvez pas simplement ouvrir un fichier .scss dans un navigateur.

4. Zone de Danger

❌ L'erreur du "Nesting Infini" :

.nav {
  ul {
    li {
      a {
        span {
          i {
            color: red; // Trop spécifique ! .nav ul li a span i
          }
        }
      }
    }
  }
}

✅ La bonne pratique : Limitez l'imbrication à 3 niveaux maximum. Si vous allez plus loin, créez une nouvelle classe.

❌ Confondre Variables Sass et Variables CSS :

$color: red; (Sass) : Disparaît après la compilation. Le navigateur ne la voit jamais.
--color: red; (CSS Native) : Existe dans le navigateur et peut être modifiée dynamiquement via JavaScript.

Flux de compilation Sass

Questions clés

1. Quelle est la différence fondamentale entre Sass et SCSS ?

Découvrir la réponse

Sass est le nom du langage. Historiquement, il existait deux syntaxes : la syntaxe originale .sass (indentée, sans accolades ni points-virgules) et la syntaxe .scss (Sassy CSS, qui ressemble au CSS classique). Aujourd'hui, la syntaxe .scss est la norme car elle est plus accessible et compatible avec le CSS standard.

2. Pourquoi utiliser un mixin plutôt qu'une simple classe CSS ?

Découvrir la réponse

Une classe CSS ajoute un élément au HTML (ex: <div class="flex-center">). Un mixin Sass permet d'injecter des propriétés CSS directement dans un sélecteur existant sans polluer le HTML avec des classes utilitaires, tout en permettant de passer des paramètres dynamiques.

3. Qu'est-ce qu'un "Partial" dans Sass ?

Découvrir la réponse

Un partial est un fichier dont le nom commence par un underscore (ex: _variables.scss). Le compilateur Sass sait qu'il ne doit pas transformer ce fichier en un fichier CSS indépendant, mais qu'il doit être importé dans un fichier principal via la règle @use ou @import.

4. Le navigateur peut-il lire un fichier .scss ?

Découvrir la réponse

Non. Le navigateur ne comprend que le CSS. Le fichier .scss doit impérativement passer par un compilateur (comme Dart Sass) pour devenir un fichier .css.

Mise en pratique

Exercice 1 : Reproduction guidée

Objectif : Créer un système de couleurs basique avec Sass.

HTML de départ :

<button class="btn">Cliquez-moi</button>

Déclarez trois variables : $color-primary (bleu), $color-secondary (gris), et $color-accent (orange).
Créez une classe .btn qui utilise la couleur primaire pour le fond et le blanc pour le texte.
Imbriquez un état :hover pour que le bouton devienne de couleur accent au survol.

Découvrir la solution commentée

// Définition des variables de marque
$color-primary: #007bff;
$color-secondary: #6c757d;
$color-accent: #ff8c00;

.btn {
  background-color: $color-primary;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;

  // L'esperluette & représente le sélecteur parent (.btn)
  &:hover {
    background-color: $color-accent;
  }
}

Exercice 2 : Adaptation

Objectif : Transformer un bloc de code CSS répétitif en utilisant un mixin.

HTML de départ :

<div class="box-small">S</div>
<div class="box-large">L</div>

Voici le code CSS source :

.box-small {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
}
.box-large {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
}

Consigne : Créez un mixin nommé box-size qui prend un argument $size pour gérer la largeur et la hauteur, tout en gardant le centrage flex commun.

Découvrir la solution commentée

// Mixin avec paramètre pour éviter la répétition des dimensions
@mixin box-size($size) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: $size;
  height: $size;
}

.box-small {
  @include box-size(50px);
}

.box-large {
  @include box-size(200px);
}

Exercice 3 : Conception

Objectif : Créer un mini-système de design pour une carte de produit.

HTML de départ :

<div class="product-card">
  <h3>Casque Bluetooth Pro</h3>
  <p class="price">89,99 €</p>
</div>

Consignes détaillées :

Variables : Déclarez $brand-color (vert), $text-dark (gris foncé) et $spacing-md (1.5rem).
Mixin : Créez @mixin responsive-text($mobile-size, $desktop-size) qui :
- Applique font-size: $mobile-size par défaut.
- Dans un @media (min-width: 601px), applique font-size: $desktop-size.
Composant .product-card : Donnez-lui une bordure, un border-radius, et un padding basé sur $spacing-md.
Imbrication : À l'intérieur de .product-card :
- Stylez h3 avec $text-dark et appliquez @include responsive-text(1.2rem, 2rem).
- Stylez .price avec $brand-color, en gras, et ajoutez un soulignement au :hover via imbrication.

Découvrir la solution commentée

// 1. Variables de design
$brand-color: #2ecc71;
$text-dark: #333;
$spacing-md: 1.5rem;

// 2. Mixin pour la typographie responsive
@mixin responsive-text($mobile-size, $desktop-size) {
  font-size: $mobile-size;

  @media (min-width: 601px) {
    font-size: $desktop-size;
  }
}

// 3. Structure de la carte
.product-card {
  border: 1px solid #ddd;
  padding: $spacing-md;
  border-radius: 10px;
  text-align: center;

  h3 {
    color: $text-dark;
    margin-bottom: 0.5rem;
    // Application du mixin : 1.2rem sur mobile, 2rem sur desktop
    @include responsive-text(1.2rem, 2rem);
  }

  .price {
    color: $brand-color;
    font-weight: bold;
    font-size: 1.1rem;

    &:hover {
      text-decoration: underline;
    }
  }
}

Le concept de Préprocesseur CSS​

1. Quoi​

2. Pourquoi​

3. Comment​

A. Syntaxe de base : Les Variables​

B. Cas concret : Imbrication et Mixins​

C. Limitations​

4. Zone de Danger​

Flux de compilation Sass​

Questions clés​

Mise en pratique​

Exercice 1 : Reproduction guidée​

Exercice 2 : Adaptation​

Exercice 3 : Conception​

Le concept de Préprocesseur CSS

1. Quoi

2. Pourquoi

3. Comment

A. Syntaxe de base : Les Variables

B. Cas concret : Imbrication et Mixins

C. Limitations

4. Zone de Danger

Flux de compilation Sass

Questions clés

Mise en pratique

Exercice 1 : Reproduction guidée

Exercice 2 : Adaptation

Exercice 3 : Conception