Introduction à SCSS et aux préprocesseurs CSS

Qu'est-ce qu'un préprocesseur CSS ?

Un préprocesseur CSS est un outil qui te permet d'écrire des styles avec des fonctionnalités "en plus" par rapport à CSS : des variables, des fonctions, des boucles, une organisation en fichiers, etc. Ensuite, l'outil transforme ton code en CSS classique.

Les navigateurs ne comprennent pas directement SCSS. Ils comprennent uniquement le CSS final. Le SCSS est donc un langage de travail (source), et le CSS est le résultat (output).

SCSS, Sass : quelle différence ?

Sass est le nom de la technologie (le projet), et SCSS est la syntaxe la plus utilisée aujourd'hui. SCSS ressemble beaucoup à du CSS, ce qui le rend idéal pour apprendre progressivement.

• SCSS : ressemble à CSS, utilise des accolades {} et des ;.
• Sass (ancienne syntaxe) : indentation sans accolades ni points-virgules (moins utilisée en formation).

Pourquoi utiliser SCSS plutôt que du CSS "pur" ?

Sur une petite page, CSS suffit largement. Mais dès que ton projet grandit, tu rencontres souvent ces problèmes :

• Répétition de valeurs (mêmes couleurs, mêmes espacements, mêmes tailles).
• Fichiers CSS très longs, difficiles à maintenir.
• Styles dupliqués (boutons, cartes, composants UI répétés).
• Manque d'organisation et de conventions.

SCSS répond à ces problèmes en te donnant des outils de structuration et de factorisation. Résultat : un code plus propre, plus logique, et plus simple à faire évoluer.

Exemple 1 : variable SCSS (et CSS généré)

Un cas très courant : tu as une couleur principale (branding). En CSS pur, tu la répètes partout. En SCSS, tu la stockes dans une variable, et tu la réutilises.

SCSS :

// Une variable commence par $
$couleur-principale: #7aa7ff;

.btn {
  background: $couleur-principale;
  color: white;
  padding: 10px 14px;
  border-radius: 10px;
}

CSS généré (ce que le navigateur comprend) :

.btn {
  background: #7aa7ff;
  color: white;
  padding: 10px 14px;
  border-radius: 10px;
}

Exemple 2 : nesting (imbrication) (et CSS généré)

En CSS, tu écris souvent des sélecteurs longs. SCSS permet d'imbriquer les règles, ce qui rend le code plus proche de la structure HTML.

SCSS :

.card {
  padding: 16px;
  border-radius: 12px;

  h2 {
    margin: 0 0 8px;
    font-size: 18px;
  }

  a {
    color: #7aa7ff;

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

CSS généré :

.card {
  padding: 16px;
  border-radius: 12px;
}

.card h2 {
  margin: 0 0 8px;
  font-size: 18px;
}

.card a {
  color: #7aa7ff;
}

.card a:hover {
  text-decoration: underline;
}

Cas concret : garder un design cohérent sur plusieurs composants

Imaginons un mini design system : une couleur principale, un rayon d'arrondi, et des espacements. L'objectif est que boutons, cartes et badges restent cohérents.

SCSS :

// Variables "design"
$primary: #7aa7ff;
$radius: 12px;
$space-1: 8px;
$space-2: 12px;
$space-3: 16px;

.btn {
  background: $primary;
  color: white;
  padding: $space-2 $space-3;
  border-radius: $radius;
}

.card {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: $radius;
  padding: $space-3;

  .card__title {
    margin: 0 0 $space-1;
    font-weight: 800;
  }
}

.badge {
  display: inline-block;
  padding: 4px $space-2;
  border-radius: 999px;
  background: rgba($primary, .15);
  color: $primary;
}

CSS généré (extrait) :

.btn {
  background: #7aa7ff;
  color: white;
  padding: 12px 16px;
  border-radius: 12px;
}

.card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 16px;
}

Cas concret : modulariser pour éviter un seul fichier énorme

Un problème fréquent en CSS : tout est dans style.css, et on ne retrouve rien. SCSS encourage une organisation en fichiers : chaque "famille" de styles dans un fichier dédié. On verra cela en détail au Chapitre 6, mais retiens déjà l'idée.

Exemple d'organisation (aperçu) :

scss/
  base/
    _reset.scss
    _typography.scss
  components/
    _buttons.scss
    _cards.scss
  layout/
    _header.scss
    _footer.scss
  main.scss

Tu écris dans plusieurs fichiers, puis tu compiles vers un CSS final (souvent un seul fichier main.css).

Bonnes pratiques dès le début

• Reste proche du CSS au départ : SCSS est puissant, mais l'objectif est d'être lisible.
• Centralise les valeurs "design" (couleurs, espacements, radius) dans des variables.
• Évite le nesting excessif : si tu imbriques trop, tu crées un CSS trop spécifique.
• Commente quand tu introduis une logique (par exemple une palette ou une règle "magique").
• Pense maintenabilité : le "toi du futur" ou un collègue doit comprendre en 20 secondes.

Erreur 1 : penser que SCSS remplace le CSS

SCSS sert à produire du CSS. Si tu ne comprends pas les bases CSS (sélecteurs, cascade, spécificité), SCSS ne résoudra pas les problèmes. Il les rendra parfois plus difficiles si tu t'appuies sur des raccourcis sans comprendre.

Erreur 2 : nesting trop profond

Imbriquer 4 ou 5 niveaux peut produire des sélecteurs très spécifiques et difficiles à surcharger. En pratique, essaie de rester à 1 à 2 niveaux la plupart du temps, et utilise des classes bien nommées.

Exemple à éviter :

.page {
  .layout {
    .content {
      .card {
        .title {
          // Trop profond : sélecteur difficile à réutiliser/surcharger
        }
      }
    }
  }
}

Erreur 3 : multiplier les variables "inutiles"

Les variables sont super utiles, mais si tu crées une variable pour chaque valeur (même celles utilisées une seule fois), tu risques de perdre en lisibilité. Un bon compromis : variable = valeur "design" ou valeur réutilisée.