📚 Cours SCSS (Sass) 📍 Chapitre 11 / 21

Chapitre 11 – Conditions en SCSS

Les conditions permettent d'introduire de la logique dans ton SCSS. Grâce à @if, @else if et @else, tu peux adapter automatiquement les styles selon des paramètres, des tailles, des thèmes ou des variantes de composants, tout en gardant un CSS final clair et maintenable.

Objectifs du chapitre

  • Comprendre le rôle et l'utilité des conditions en SCSS.
  • Utiliser correctement @if, @else if et @else.
  • Combiner conditions avec mixins, fonctions et boucles.
  • Créer des variantes de styles propres, logiques et maintenables.
À retenir

Les conditions sont évaluées à la compilation, pas à l'exécution dans le navigateur. Le navigateur reçoit uniquement le CSS correspondant aux conditions vraies.

Explications théoriques détaillées

Syntaxe de base des conditions

SCSS propose une syntaxe proche des langages de programmation classiques, ce qui rend les conditions très intuitives.

Structure de base :

SCSS
@if condition {
  /* styles appliqués si la condition est vraie */
} @else if autre-condition {
  /* styles appliqués si cette autre condition est vraie */
} @else {
  /* styles par défaut (si aucune condition n'est vraie) */
}

Une condition peut tester différents types de comparaisons :

  • Égalité : $variable == 'valeur'
  • Inégalité : $variable != 'valeur'
  • Valeurs booléennes : $variable == true ou $variable (vérifie si vrai)
  • Comparaisons numériques : $size > 10, $width <= 100px
  • Vérification de présence : variable-exists($name)

Pourquoi utiliser des conditions en SCSS ?

Les conditions transforment ton SCSS d'un simple langage de style en un outil logique et dynamique :

  • Créer des variantes sans dupliquer le code : un seul composant avec plusieurs apparences.
  • Centraliser la logique des composants : tous les comportements conditionnels au même endroit.
  • Rendre les styles adaptables : thèmes clair/sombre, tailles responsives, états de composants.
  • Améliorer la maintenabilité : un changement se propage à toutes les variantes.
Conseil terrain

Les conditions sont idéales dans les mixins et fonctions. Les utiliser directement dans des sélecteurs CSS doit rester ponctuel pour éviter la complexité.

Exemples simples

Condition simple sur une variable

Un cas typique : gérer des thèmes clair/sombre avec une simple variable.

SCSS :

SCSS
$theme: dark;

body {
  @if $theme == dark {
    background: #0b1020;
    color: white;
    --text-color: #e9eeff;
  } @else {
    background: white;
    color: black;
    --text-color: #1e293b;
  }
}

CSS généré (si $theme = dark) :

CSS
body {
  background: #0b1020;
  color: white;
  --text-color: #e9eeff;
}

Le CSS généré dépendra uniquement de la valeur de $theme. L'autre branche n'est pas incluse.

Conditions dans une mixin

Les mixins deviennent beaucoup plus puissantes lorsqu'elles peuvent adapter leur comportement.

SCSS :

SCSS
@mixin text-size($size) {
  @if $size == sm {
    font-size: 14px;
    line-height: 1.4;
  } @else if $size == md {
    font-size: 16px;
    line-height: 1.5;
  } @else if $size == lg {
    font-size: 20px;
    line-height: 1.6;
  } @else if $size == xl {
    font-size: 24px;
    line-height: 1.7;
  } @else {
    font-size: 16px;
    line-height: 1.5;
  }
}

.title {
  @include text-size(lg);
  font-weight: 700;
}

.small-text {
  @include text-size(sm);
  color: #64748b;
}

CSS généré :

CSS
.title {
  font-size: 20px;
  line-height: 1.6;
  font-weight: 700;
}

.small-text {
  font-size: 14px;
  line-height: 1.4;
  color: #64748b;
}
À retenir

Les conditions rendent les mixins plus intelligentes et plus flexibles. Une seule mixin peut maintenant gérer plusieurs cas d'usage.

Exemples concrets et professionnels

Cas pro 1 : variantes de boutons (primary / secondary / danger)

Créer un système de boutons cohérent avec différentes variantes visuelles.

SCSS :

SCSS
@mixin button-variant($type) {
  // Styles communs à tous les boutons
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  
  // Styles spécifiques selon le type
  @if $type == primary {
    background: #7aa7ff;
    color: white;
    
    &:hover {
      background: darken(#7aa7ff, 10%);
      transform: translateY(-2px);
    }
  } @else if $type == secondary {
    background: transparent;
    color: #7aa7ff;
    border: 1px solid #7aa7ff;
    
    &:hover {
      background: rgba(122, 167, 255, 0.1);
    }
  } @else if $type == danger {
    background: #ef4444;
    color: white;
    
    &:hover {
      background: darken(#ef4444, 10%);
    }
  } @else {
    // Variante par défaut (neutre)
    background: #94a3b8;
    color: white;
  }
}

.btn-primary {
  @include button-variant(primary);
}

.btn-secondary {
  @include button-variant(secondary);
}

.btn-danger {
  @include button-variant(danger);
}

CSS généré (extrait pour .btn-primary) :

CSS
.btn-primary {
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #7aa7ff;
  color: white;
}

.btn-primary:hover {
  background: #5d8fff;
  transform: translateY(-2px);
}

Toute la logique visuelle du bouton est centralisée dans une seule mixin. Pour ajouter une nouvelle variante, il suffit d'ajouter une condition.

Cas pro 2 : conditions + boucles (tailles de composants)

Combiner @each et @if pour générer plusieurs tailles d'un même composant.

SCSS :

SCSS
$sizes: sm, md, lg;

@each $size in $sizes {
  .card--#{$size} {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    
    @if $size == sm {
      padding: 12px;
      font-size: 14px;
    } @else if $size == md {
      padding: 16px;
      font-size: 16px;
    } @else if $size == lg {
      padding: 24px;
      font-size: 18px;
    }
    
    // Styles conditionnels pour le titre selon la taille
    .card__title {
      @if $size == sm {
        font-size: 16px;
        margin-bottom: 8px;
      } @else if $size == md {
        font-size: 18px;
        margin-bottom: 12px;
      } @else if $size == lg {
        font-size: 20px;
        margin-bottom: 16px;
      }
    }
  }
}

CSS généré (extrait pour .card--lg) :

CSS
.card--lg {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 24px;
  font-size: 18px;
}

.card--lg .card__title {
  font-size: 20px;
  margin-bottom: 16px;
}
Conseil terrain

Si tu empiles trop de @if, pense aux maps SCSS. Elles seront vues au chapitre suivant et rendent ce code encore plus propre et maintenable.

Bonnes pratiques

Guide des bonnes pratiques pour les conditions SCSS

  • Limiter le nombre de conditions imbriquées : au-delà de 2-3 niveaux, le code devient difficile à lire.
  • Utiliser des valeurs explicites : primary, lg plutôt que 1, 2.
  • Centraliser la logique conditionnelle : dans des mixins ou fonctions plutôt que dispersée.
  • Toujours prévoir un cas par défaut : avec @else pour éviter les styles incomplets.
  • Documenter les conditions complexes : expliquer pourquoi telle condition existe.
  • Éviter la logique trop complexe : le SCSS reste avant tout pour le style, pas pour la logique applicative.
À retenir

Un SCSS lisible vaut mieux qu'un SCSS "malin". Si la logique devient trop complexe, simplifie ou réorganise. La maintenabilité est plus importante que la sophistication.

Erreurs courantes

Erreur 1 : trop de logique conditionnelle

Le SCSS n'est pas un langage applicatif complet. Trop de conditions, surtout imbriquées, rendent le code difficile à comprendre, à déboguer et à maintenir.

À éviter

Des conditions sur plusieurs niveaux qui nécessitent un diagramme pour être comprises. Dans ce cas, simplifie ou réécris différemment.

Erreur 2 : oublier le cas par défaut

Sans @else, une valeur inattendue peut produire un CSS incomplet ou générer des erreurs silencieuses.

SCSS (ERREUR)
@mixin alert($type) {
  @if $type == 'success' {
    background: green;
  } @else if $type == 'warning' {
    background: orange;
  }
  // Oubli du @else - si $type est 'error', pas de style !
}

Erreur 3 : utiliser des chaînes magiques partout

Si tu compares souvent les mêmes valeurs (comme 'primary', 'secondary'), envisage d'utiliser des constantes via des variables ou, mieux, des maps SCSS.

Solution

Définis tes valeurs dans des variables pour éviter les fautes de frappe et centraliser les modifications.

Résumé du chapitre

Ce que vous avez appris
✓
@if, @else if et @else ajoutent de la logique au SCSS pour créer des styles adaptatifs.
✓
Les conditions sont évaluées à la compilation, pas dans le navigateur, ce qui permet d'optimiser le CSS final.
✓
Les conditions sont idéales pour gérer des variantes (boutons, cartes) et des thèmes (clair/sombre).
✓
Les conditions combinent parfaitement avec les mixins, fonctions et boucles pour créer des systèmes de design sophistiqués.

Prochain chapitre : Maps SCSS

Dans le prochain chapitre, nous verrons les maps SCSS, un outil très puissant pour remplacer les conditions répétitives et structurer des données complexes comme les palettes de couleurs, les tailles, les thèmes et les configurations de composants.

  • Comprendre ce qu'est une map SCSS et comment la déclarer
  • Accéder aux valeurs d'une map avec map-get()
  • Parcourir une map avec @each
  • Utiliser les maps pour remplacer les longues séries de @if
  • Cas pratique : système de couleurs complet avec maps
← Chapitre 10 : Boucles en SCSS Chapitre 12 : Maps SCSS →