Débogage SCSS

Erreurs vs warnings

• Erreur : la compilation s'arrête (CSS non généré).
• Warning : la compilation continue, mais quelque chose est suspect.

Lire un message d'erreur Sass

Un message Sass contient généralement :

• le type d'erreur
• le fichier concerné
• la ligne et la colonne

Exemple d'erreur :

Error: Undefined variable.
  ╷
5 │   color: $primay;
  │          ^^^^^^^
  ╵
scss/components/_button.scss 5:10

Ici, l'erreur est évidente : faute de frappe dans le nom de la variable.

Utiliser @debug pour inspecter une valeur

@debug affiche une information dans la console lors de la compilation.

$colors: (
  primary: #7aa7ff,
  danger: #ef4444
);

@debug map-get($colors, primary);

Résultat en console :

scss/main.scss:6 DEBUG: #7aa7ff

Utiliser @warn pour signaler un usage incorrect

@warn est idéal pour prévenir sans bloquer la compilation.

@function color($key) {
  @if map-has-key($colors, $key) {
    @return map-get($colors, $key);
  } @else {
    @warn "Couleur inconnue : #{$key}";
    @return black;
  }
}

Cas pro 1 : bloquer une mauvaise configuration avec @error

Quand une erreur doit absolument empêcher la compilation, on utilise @error.

@mixin mq($key) {
  @if map-has-key($breakpoints, $key) {
    @media (min-width: map-get($breakpoints, $key)) {
      @content;
    }
  } @else {
    @error "Breakpoint inconnu : #{$key}";
  }
}

Cas pro 2 : sourcemaps pour retrouver le SCSS source

Avec les sourcemaps activées, les DevTools indiquent le fichier SCSS d'origine.

sass --watch scss/main.scss:css/style.css --source-map

Dans le navigateur, un clic sur une règle CSS te renvoie vers le fichier SCSS exact.

Cas pro 3 : erreur fréquente avec les maps imbriquées

Une clé mal nommée ou manquante est une source classique de bugs.

$tokens: (
  colors: (
    primary: #7aa7ff
  )
);

@function token($group, $key) {
  @if map-has-key($tokens, $group) {
    @return map-get(map-get($tokens, $group), $key);
  } @else {
    @error "Groupe inconnu : #{$group}";
  }
}

.button {
  background: token(colors, primay);
}

Ici, la clé primay est incorrecte → erreur explicite au lieu d'un CSS cassé.

Cas pro 4 : déboguer progressivement

• Commenter temporairement des blocs.
• Réduire le problème à un cas minimal.
• Afficher des valeurs avec @debug.
• Relire le CSS généré si nécessaire.

• Lire attentivement les messages d'erreur Sass.
• Utiliser @warn pour guider les usages incorrects.
• Utiliser @error pour sécuriser les API internes.
• Activer les sourcemaps en développement.
• Nettoyer les @debug avant la production.

Erreur 1 : ignorer les warnings

Les warnings sont souvent des bugs futurs.

Erreur 2 : désactiver les sourcemaps en développement

Tu te prives d'un outil majeur pour comprendre ton CSS.

Erreur 3 : empiler des correctifs sans comprendre

Cela crée de la dette technique et rend les bugs plus difficiles à corriger.