Variables & Typage

Crée des ingrédients dynamiques pour tes formules CSS.

Imagine : dans ton atelier d'alchimie, tu as des fioles étiquetées : "Essence de Feu #ff4444", "Poudre Lunaire 2rem", "Élixir d'Ombre rgba(0,0,0,0.8)". Au lieu de chercher à chaque fois tes ingrédients, tu les stockes dans des variables SCSS. Change la recette d'une fiole, et tous tes sorts qui l'utilisent sont automatiquement mis à jour !

2.1Déclarer une variable

En SCSS, une variable commence toujours par $. Tu peux y stocker des couleurs, des tailles, des polices... tous tes ingrédients de base.

// Variables de couleur
$couleur-feu: #ff4444;
$couleur-eau: #4444ff;
$couleur-terre: #8B4513;

// Variables de taille
$taille-titre: 2.5rem;
$marge-standard: 1rem;
$rayon-carte: 8px;

// Variables de police
$police-titre: 'Inter', sans-serif;
$police-code: 'JetBrains Mono', monospace;

2.2Utiliser les variables

Une fois déclarées, tes variables deviennent réutilisables partout dans ton SCSS. Plus besoin de retenir #ff4444, tu écris juste $couleur-feu !

.bouton-attaque {
  background-color: $couleur-feu;
  padding: $marge-standard;
  border-radius: $rayon-carte;
  font-family: $police-titre;
  font-size: $taille-titre;
}

.carte-sort {
  border: 2px solid $couleur-feu;
  margin: $marge-standard;
}

2.3Portée des variables (scope)

Comme dans un jeu, tes variables ont une "zone d'effet". Une variable globale est accessible partout, une variable locale n'existe que dans son bloc.

// Variable globale (définie en dehors de tout bloc)
$couleur-primaire: #3498db;

.carte-mage {
  // Variable locale (seulement dans ce bloc)
  $couleur-mana: #3498db;
  
  background: $couleur-primaire;  // ✅ Fonctionne
  border-color: $couleur-mana;    // ✅ Fonctionne
}

.carte-guerrier {
  background: $couleur-primaire;  // ✅ Fonctionne (variable globale)
  border-color: $couleur-mana;    // ❌ Erreur : $couleur-mana n'existe pas ici
}

2.4Interpolation : intégrer des variables partout

L'interpolation, c'est un mot compliqué pour dire "insérer une variable dans du texte". En gros, tu veux que SCSS remplace #{$ma-variable} par la valeur de ta variable, même quand c'est dans un endroit où normalement on ne peut pas mettre de variables.

Normalement, tu utilises tes variables comme ça : color: $ma-couleur;. Mais parfois, tu veux que ta variable devienne partie du nom d'une classe ou d'un fichier. C'est là qu'intervient l'interpolation avec #{$variable}.

$prefixe: "btn";
$taille: "large";
$theme: "sombre";

// ❌ Ça ne marche PAS (SCSS ne comprend pas)
.prefixe-taille {
  padding: 1rem 2rem;
}

// ✅ Ça marche avec l'interpolation
.#{$prefixe}-#{$taille} {
  padding: 1rem 2rem;
  background: url("themes/#{$theme}/bouton.png");
}

Cas d'usage concrets

L'interpolation est super utile pour créer des systèmes de composants dynamiques (boutons de différentes tailles), gérer plusieurs thèmes, ou générer automatiquement des classes CSS à partir de listes de valeurs.

Autre exemple pratique : tu peux l'utiliser dans les noms de propriétés CSS aussi !

$direction: "top";
$propriete: "margin";

.element {
  #{$propriete}-#{$direction}: 20px;
  // Génère : margin-top: 20px;
}

2.5Variables par défaut

Le flag !default permet de définir une valeur de secours. Si la variable existe déjà, elle garde sa valeur. Sinon, elle prend la valeur par défaut.

// Définition par défaut
$couleur-primaire: #3498db !default;
$taille-base: 1rem !default;

// Si $couleur-primaire était déjà définie ailleurs, 
// elle garde sa valeur. Sinon, elle devient #3498db

2.6Types de données en SCSS

SCSS reconnaît différents types de valeurs, chacun avec ses propres propriétés :

Nombres : 12, 3.14, 10px, 2em
Chaînes : "Arial", 'Inter', sans-serif
Couleurs : #ff0000, red, rgb(255,0,0)
Booléens : true, false
Null : null (absence de valeur)
Listes : 10px 20px 30px, (item1, item2, item3)
Maps : (clé1: valeur1, clé2: valeur2)

2.7Bonnes pratiques pour nommer les variables

Nomme tes variables selon leur fonction plutôt que leur apparence :

// ❌ Basé sur l'apparence (que se passe-t-il si tu changes le bleu ?)
$couleur-bleue: #3498db;
$texte-rouge: #e74c3c;

// ✅ Basé sur la fonction (plus flexible et compréhensible)
$couleur-primaire: #3498db;
$couleur-danger: #e74c3c;
$couleur-succes: #27ae60;

// ✅ Pour un thème gaming
$couleur-mana: #3498db;
$couleur-vie: #e74c3c;
$couleur-experience: #f39c12;

Astuce de maître alchimiste

Organise tes variables par catégories dans des fichiers séparés : _colors.scss, _typography.scss, _spacing.scss. Ton atelier sera plus ordonné et tes formules plus faciles à retrouver !