Conditions & Boucles

Ajoute de la logique à ton CSS avec @if, @each, @for.

Imagine : tu programmes un golem magique pour qu'il organise automatiquement ton atelier. Tu lui donnes des instructions : "Si la fiole est rouge, range-la à gauche. Si elle est bleue, à droite. Et pour chaque ingrédient dans la liste, crée-lui une étiquette." Avec les conditions et boucles SCSS, tu peux donner ce genre d'instructions intelligentes à ton code CSS !

8.1Conditions simples : @if, @else if, @else

Les conditions permettent à ton SCSS de prendre des décisions. Selon une valeur, il génère différents styles :

$theme: "sombre";

.interface {
  @if $theme == "sombre" {
    background: #333;
    color: white;
  } @else if $theme == "clair" {
    background: white;
    color: #333;
  } @else {
    background: #ccc;
    color: #666;
  }
}

Tu peux utiliser toutes les comparaisons qu'on a vues dans l'article précédent :

$taille-ecran: 768px;

.responsive {
  @if $taille-ecran > 1200px {
    font-size: 1.5rem;
  } @else if $taille-ecran > 768px {
    font-size: 1.2rem;
  } @else {
    font-size: 1rem;
  }
}

8.2Conditions dans les fonctions

Les conditions sont particulièrement utiles dans les fonctions pour créer des comportements adaptatifs :

@function taille-bouton($type) {
  @if $type == "petit" {
    @return 0.8rem;
  } @else if $type == "normal" {
    @return 1rem;
  } @else if $type == "grand" {
    @return 1.5rem;
  } @else {
    @warn "Type de bouton inconnu : #{$type}";
    @return 1rem; // Valeur par défaut
  }
}

.bouton-small { font-size: taille-bouton("petit"); }
.bouton-large { font-size: taille-bouton("grand"); }

8.3Boucle @for : répéter avec un compteur

La boucle @for répète du code en incrémentant un compteur. Parfaite pour créer des grilles ou des variations :

// Créer un système de colonnes
@for $i from 1 through 12 {
  .col-#{$i} {
    width: percentage($i / 12);
  }
}

// Générer des espacements progressifs
@for $i from 1 through 5 {
  .marge-#{$i} {
    margin: $i * 0.5rem;
  }
}

Le CSS généré ressemblera à ça :

.col-1 { width: 8.33333%; }
.col-2 { width: 16.66667%; }
.col-3 { width: 25%; }
/* ... */
.col-12 { width: 100%; }

.marge-1 { margin: 0.5rem; }
.marge-2 { margin: 1rem; }
.marge-3 { margin: 1.5rem; }
/* ... */

@for... through vs @for... to

through inclut la valeur finale, to l'exclut. @for $i from 1 through 3 fait 1, 2, 3. @for $i from 1 to 3 fait 1, 2.

8.4Boucle @each : parcourir des listes

@each parcourt une liste ou une map. Super pratique pour traiter des collections de valeurs :

// Liste simple
$couleurs: rouge, vert, bleu, jaune;

@each $couleur in $couleurs {
  .badge-#{$couleur} {
    background-color: $couleur;
  }
}

// Liste de listes (nom, couleur)
$themes: 
  (primaire, #3498db),
  (succes, #27ae60),
  (danger, #e74c3c),
  (warning, #f39c12);

@each $nom, $couleur in $themes {
  .btn-#{$nom} {
    background: $couleur;
    border-color: darken($couleur, 10%);
  }
}

8.5Boucle @each avec des maps

Les maps (dictionnaires clé-valeur) sont parfaites avec @each pour créer des systèmes configurables :

$breakpoints: (
  mobile: 480px,
  tablet: 768px,
  desktop: 1024px,
  wide: 1200px
);

// Générer des classes utilitaires responsive
@each $nom, $taille in $breakpoints {
  @media (max-width: $taille) {
    .hide-#{$nom} {
      display: none;
    }
    
    .text-center-#{$nom} {
      text-align: center;
    }
  }
}

// Map plus complexe avec plusieurs propriétés
$boutons: (
  primaire: (couleur: #3498db, taille: 1rem),
  secondaire: (couleur: #95a5a6, taille: 0.9rem),
  large: (couleur: #2c3e50, taille: 1.2rem)
);

@each $type, $proprietes in $boutons {
  .btn-#{$type} {
    background: map-get($proprietes, couleur);
    font-size: map-get($proprietes, taille);
  }
}

8.6Boucle @while : répéter selon une condition

@while continue tant qu'une condition est vraie. Attention aux boucles infinies !

// Générer des tailles jusqu'à une limite
$taille: 1rem;
$compteur: 1;

@while $taille < 3rem {
  .taille-#{$compteur} {
    font-size: $taille;
  }
  
  $taille: $taille * 1.2;
  $compteur: $compteur + 1;
}

// Création d'une suite géométrique
$base: 8px;
$index: 1;

@while $index <= 6 {
  .spacing-#{$index} {
    margin: $base;
  }
  
  $base: $base * 2;  // 8px, 16px, 32px, 64px...
  $index: $index + 1;
}

8.7Combiner conditions et boucles

La vraie puissance apparaît quand tu combines les deux. Tu peux créer des systèmes très sophistiqués :

// Système de grille avec points de rupture
$colonnes: 12;
$breakpoints: (mobile: 480px, tablet: 768px);

@for $i from 1 through $colonnes {
  .col-#{$i} {
    width: percentage($i / $colonnes);
  }
  
  // Ajouter des variantes responsive
  @each $nom, $taille in $breakpoints {
    @media (max-width: $taille) {
      .col-#{$nom}-#{$i} {
        width: percentage($i / $colonnes);
      }
    }
  }
}

// Générer des utilitaires avec conditions
@each $propriete in (margin, padding) {
  @for $i from 0 through 5 {
    .#{$propriete}-#{$i} {
      #{$propriete}: $i * 0.25rem;
    }
    
    // Seulement pour les valeurs paires
    @if $i % 2 == 0 {
      .#{$propriete}-x-#{$i} {
        #{$propriete}-left: $i * 0.25rem;
        #{$propriete}-right: $i * 0.25rem;
      }
    }
  }
}

8.8Cas pratiques et patterns utiles

Voici quelques patterns que tu retrouveras souvent dans des projets réels :

// 1. Générer des animations en cascade
@for $i from 1 through 10 {
  .fade-in-#{$i} {
    animation-delay: $i * 0.1s;
  }
}

// 2. Créer des couleurs d'état automatiquement  
$etats: (
  succes: #27ae60,
  info: #3498db,
  warning: #f39c12,
  danger: #e74c3c
);

@each $nom, $couleur in $etats {
  .alert-#{$nom} {
    background: lighten($couleur, 40%);
    border-color: $couleur;
    color: darken($couleur, 20%);
  }
}

// 3. Système de z-index organisé
$z-indexes: header, modal, tooltip, dropdown;

@each $element in $z-indexes {
  $index: index($z-indexes, $element);
  .z-#{$element} {
    z-index: $index * 10;
  }
}

Performance importante

Les boucles génèrent du CSS à la compilation. Une boucle de 1 à 100 créera 100 classes CSS. Assure-toi que tu as vraiment besoin de tout ce CSS, sinon ton fichier final sera très lourd !

8.9Débugger tes conditions et boucles

Utilise @debug pour afficher des valeurs pendant la compilation. Très utile pour comprendre ce qui se passe :

$compteur: 0;

@each $couleur in (rouge, vert, bleu) {
  $compteur: $compteur + 1;
  @debug "Traitement de la couleur #{$couleur} (#{$compteur})";
  
  .couleur-#{$compteur} {
    color: $couleur;
  }
}

Le compilateur affichera dans la console :

Debug: Traitement de la couleur rouge (1)
Debug: Traitement de la couleur vert (2)  
Debug: Traitement de la couleur bleu (3)