Aller au contenu principal

Module SCSS.7 – SCSS avancé

Objectif​

Maîtriser les fonctionnalités avancées SCSS : loops, conditions, maps pour créer du SCSS dynamique et puissant.

Théorie​

Loops (@for, @each, @while)​

@for​

Boucle for :

@for $i from 1 through 5 {
    .col-#{$i} {
        width: percentage($i / 5);
    }
}

Compilé :

.col-1 { width: 20%; }
.col-2 { width: 40%; }
.col-3 { width: 60%; }
.col-4 { width: 80%; }
.col-5 { width: 100%; }

Syntaxe :

  • @for $i from 1 through 5 : Inclut 5
  • @for $i from 1 to 5 : Exclut 5 (1 à 4)

Exemple pratique :

@for $i from 1 through 12 {
    .grid-#{$i} {
        grid-column: span $i;
    }
}

@each​

Boucle each (listes) :

$colors: red, blue, green;

@each $color in $colors {
    .text-#{$color} {
        color: $color;
    }
}

Compilé :

.text-red { color: red; }
.text-blue { color: blue; }
.text-green { color: green; }

Avec maps :

$theme-colors: (
    primary: #007bff,
    secondary: #6c757d,
    success: #28a745
);

@each $name, $color in $theme-colors {
    .btn-#{$name} {
        background-color: $color;
    }
}

Compilé :

.btn-primary { background-color: #007bff; }
.btn-secondary { background-color: #6c757d; }
.btn-success { background-color: #28a745; }

@while​

Boucle while :

$i: 1;

@while $i <= 5 {
    .item-#{$i} {
        margin-top: #{$i * 10}px;
    }
    $i: $i + 1;
}

⚠️ Attention : Risque de boucle infinie, utiliser avec précaution.

Conditions (@if, @else, @else if)​

@if :

$theme: dark;

.button {
    @if $theme == dark {
        background-color: black;
        color: white;
    } @else {
        background-color: white;
        color: black;
    }
}

@else if :

$size: large;

.text {
    @if $size == small {
        font-size: 0.875rem;
    } @else if $size == medium {
        font-size: 1rem;
    } @else {
        font-size: 1.25rem;
    }
}

Dans les mixins :

@mixin button($size: medium) {
    padding: 10px 20px;
    
    @if $size == large {
        padding: 15px 30px;
        font-size: 1.25rem;
    } @else if $size == small {
        padding: 5px 10px;
        font-size: 0.875rem;
    }
}

Maps​

Déclaration :

$theme-colors: (
    primary: #007bff,
    secondary: #6c757d,
    success: #28a745,
    danger: #dc3545
);

Accès :

$primary: map-get($theme-colors, primary);

.button {
    background-color: $primary;
}

Fonctions de maps :

map-get($map, $key)        // Obtenir une valeur
map-has-key($map, $key)   // Vérifier si clé existe
map-keys($map)            // Liste des clés
map-values($map)          // Liste des valeurs
map-merge($map1, $map2)   // Fusionner deux maps

Exemple avec fonction :

$breakpoints: (
    mobile: 576px,
    tablet: 768px,
    desktop: 992px
);

@function breakpoint($key) {
    @return map-get($breakpoints, $key);
}

@mixin respond-to($breakpoint) {
    @media (min-width: breakpoint($breakpoint)) {
        @content;
    }
}

.container {
    @include respond-to(tablet) {
        width: 750px;
    }
}

Maps imbriquées​

Maps complexes :

$config: (
    colors: (
        primary: #007bff,
        secondary: #6c757d
    ),
    spacing: (
        small: 0.5rem,
        medium: 1rem,
        large: 2rem
    )
);

$primary: map-get(map-get($config, colors), primary);

Fonction helper :

@function config($category, $key) {
    $map: map-get($config, $category);
    @return map-get($map, $key);
}

.button {
    background-color: config(colors, primary);
    padding: config(spacing, medium);
}

Exemples avancés​

Génération de classes utilitaires​

$spacings: (
    xs: 0.25rem,
    sm: 0.5rem,
    md: 1rem,
    lg: 1.5rem,
    xl: 2rem
);

@each $name, $value in $spacings {
    .m-#{$name} { margin: $value; }
    .p-#{$name} { padding: $value; }
    .mt-#{$name} { margin-top: $value; }
    .mb-#{$name} { margin-bottom: $value; }
}

Système de grille​

$grid-columns: 12;

@for $i from 1 through $grid-columns {
    .col-#{$i} {
        width: percentage($i / $grid-columns);
    }
}

Thèmes dynamiques​

$themes: (
    light: (
        bg: white,
        text: black
    ),
    dark: (
        bg: black,
        text: white
    )
);

@each $theme-name, $theme-map in $themes {
    .theme-#{$theme-name} {
        background-color: map-get($theme-map, bg);
        color: map-get($theme-map, text);
    }
}

Exercices guidés​

Exercice 1 : @for​

Créez des classes avec @for :

  • Classes de grille (col-1 à col-12)
  • Classes de spacing (m-1 à m-5)
  • Observez le CSS généré

Exercice 2 : @each avec maps​

Créez des boutons avec @each :

  • Map de couleurs
  • Génération automatique de classes
  • Utilisez map-get

Exercice 3 : Conditions​

Créez un mixin avec conditions :

  • Paramètre pour la taille
  • @if/@else if pour différents styles
  • Testez avec différentes valeurs

Exercice 4 : Maps complexes​

Créez une map de configuration :

  • Couleurs
  • Espacements
  • Breakpoints
  • Fonction helper pour accéder

Exercice 5 : Génération automatique​

Créez un système de classes utilitaires :

  • Spacings avec @each
  • Couleurs avec @each
  • Grille avec @for

❌ Erreurs fréquentes​

Erreur 1 : Boucle infinie avec @while​

❌ Mauvais :

$i: 1;
@while $i <= 5 {
    // Oubli d'incrémenter $i
}

✅ Bon :

$i: 1;
@while $i <= 5 {
    // Code
    $i: $i + 1; // Incrémenter
}

Pourquoi : Boucle infinie = compilation bloquée.

Erreur 2 : Map-get avec clé inexistante​

❌ Mauvais :

$color: map-get($colors, inexistant); // null

✅ Bon :

@function color($key) {
    @if map-has-key($colors, $key) {
        @return map-get($colors, $key);
    }
    @warn "Color #{$key} not found";
    @return null;
}

Pourquoi : Vérifier l'existence de la clé.

Erreur 3 : Interpolation oubliée dans @for​

❌ Mauvais :

@for $i from 1 through 5 {
    .col-$i { } // Erreur
}

✅ Bon :

@for $i from 1 through 5 {
    .col-#{$i} { } // Interpolation
}

Pourquoi : Interpolation nécessaire pour variables dans sélecteurs.

Erreur 4 : Conditions trop complexes​

❌ Mauvais :

@if $a == 1 and $b == 2 or $c == 3 { }

✅ Bon :

@if ($a == 1 and $b == 2) or $c == 3 { }

Pourquoi : Parenthèses pour clarifier la logique.

Erreur 5 : Maps non utilisées efficacement​

❌ Mauvais :

$primary: #007bff;
$secondary: #6c757d;
// Variables séparées

✅ Bon :

$colors: (
    primary: #007bff,
    secondary: #6c757d
);
// Map organisée

Pourquoi : Maps = organisation et génération automatique.

🚀 Mini-projet​

Mission : Créer un système de design dynamique

Créez un système avec :

Maps :

  • Couleurs (primary, secondary, etc.)
  • Espacements (xs, sm, md, lg, xl)
  • Breakpoints (mobile, tablet, desktop)

Génération automatique :

  • Classes utilitaires avec @each
  • Système de grille avec @for
  • Boutons avec @each sur les couleurs

Fonctions :

  • Helper pour accéder aux maps
  • Calculs automatiques

Critères :

  • ✅ Maps bien organisées
  • ✅ Génération automatique
  • ✅ Fonctions helper
  • ✅ Code DRY
  • ✅ Système scalable

Objectif : Maîtriser les fonctionnalités avancées SCSS pour créer des systèmes dynamiques.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez les loops, conditions, maps et créez des systèmes dynamiques.