Chapitre 21 : Variables et mixins : automatisation de la maintenance

Réutilisation de code CSS via les fonctionnalités Sass

Dans le développement d'interfaces modernes, la répétition est l'ennemi de la maintenance. Imaginez que vous ayez utilisé une couleur bleu spécifique (#3498db) à 150 endroits différents dans votre projet. Le client décide soudainement que le bleu doit devenir un bleu marine (#2c3e50). Sans outils d'automatisation, vous devrez effectuer un "Rechercher et Remplacer" risqué sur tout votre projet.

C'est ici qu'interviennent les variables et les mixins de Sass. Ces outils permettent de centraliser la logique et les valeurs de votre design, transformant votre CSS d'une simple liste de styles en un véritable système programmable.

Les Variables Sass

1. Quoi

Une variable Sass est un identifiant qui stocke une valeur pour être réutilisée ultérieurement. Contrairement aux variables CSS natives (--var), les variables Sass commencent par le symbole $ et sont traitées lors de la phase de compilation. Cela signifie que le navigateur ne voit jamais la variable, mais seulement la valeur finale injectée dans le fichier CSS.

2. Pourquoi

L'utilisation de variables répond à trois besoins majeurs en entreprise :

• Cohérence visuelle : Garantir que le même gris est utilisé pour toutes les bordures du site.
• Rapidité de modification : Changer une valeur à un seul endroit pour mettre à jour l'intégralité de l'interface.
• Sémantique : Donner un nom explicite à une valeur (ex: $color-primary-action est plus parlant que #ff5733).

3. Comment

A. Syntaxe de base

La déclaration est simple : on définit le nom avec $ suivi de la valeur.

// Définition
$primary-color: #3498db;
$font-stack: 'Helvetica', sans-serif;
$spacing-unit: 16px;

// Utilisation
body {
  font-family: $font-stack;
  color: $primary-color;
  margin: $spacing-unit;
}

B. Cas concret : Système de Design (Design Tokens)

Dans un projet professionnel, on ne crée pas des variables au hasard. On organise des "Design Tokens" (jetons de design) qui séparent les valeurs brutes de leur application sémantique.

// 1. Valeurs brutes (Palette)
$palette-blue-100: #ebf5ff;
$palette-blue-500: #3498db;
$palette-blue-900: #1a5276;
$palette-grey-200: #e0e0e0;

// 2. Application sémantique (Tokens)
// On lie la valeur brute à un rôle précis
$color-brand-primary: $palette-blue-500;
$color-brand-dark: $palette-blue-900;
$color-border-light: $palette-grey-200;
$color-bg-highlight: $palette-blue-100;

// 3. Utilisation dans les composants
.card {
  background-color: $color-bg-highlight;
  border: 1px solid $color-border-light;
  
  .card-title {
    color: $color-brand-primary;
  }
  
  .card-footer {
    background-color: $color-brand-dark;
    color: white;
  }
}

C. Limitations

Il est crucial de comprendre que les variables Sass sont statiques.

• Elles ne peuvent pas être modifiées dynamiquement via JavaScript (contrairement aux variables CSS --var).
• Elles ne peuvent pas être modifiées via des Media Queries (on ne peut pas changer la valeur d'une variable $font-size à l'intérieur d'un @media pour qu'elle s'applique partout).

4. Zone de Danger

❌ L'erreur du "Nommage Couleur" : Nommer une variable $blue: #3498db;. Si demain le bleu devient vert, vous aurez une variable nommée $blue qui contient du vert, ce qui est illogique et source d'erreurs.

✅ La bonne pratique : Utiliser des noms basés sur la fonction ou le rôle : $color-primary, $color-accent, $color-text-muted.

---

Flux de compilation Sass vers CSS

---

Les Mixins Sass

1. Quoi

Un mixin est un bloc de code CSS réutilisable qui peut être "injecté" dans n'importe quelle règle CSS. On peut le voir comme une fonction qui retourne du style. Les mixins sont définis avec @mixin et appelés avec @include.

2. Pourquoi

Les mixins sont indispensables pour :

• Éviter la duplication : Ne pas réécrire 5 lignes de Flexbox pour chaque centrage d'élément.
• Gérer les préfixes navigateurs : Automatiser l'ajout de -webkit-, -moz-, etc. (bien que sebagian besar soit géré par Autoprefixer aujourd'hui).
• Créer des patterns complexes : Générer des styles de boutons ou de typographies basés sur des paramètres.

3. Comment

A. Syntaxe de base

// Définition du mixin
@mixin center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Utilisation
.hero-content {
  @include center-flex;
  height: 100vh;
}

B. Cas concret : Mixins paramétrés et dynamiques

La véritable puissance des mixins réside dans les arguments. On peut passer des valeurs pour rendre le style flexible.

// Mixin pour créer des boutons avec des variantes
@mixin button-style($bg-color, $text-color: white) {
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease;
  
  // Utilisation des arguments
  background-color: $bg-color;
  color: $text-color;

  &:hover {
    // On utilise la fonction Sass darken() pour assombrir la couleur au survol
    background-color: darken($bg-color, 10%);
  }
}

// Application
.btn-primary {
  @include button-style(#3498db); // Utilise la couleur par défaut pour le texte
}

.btn-success {
  @include button-style(#2ecc71);
}

.btn-light {
  @include button-style(#f8f9fa, #333); // On surcharge la couleur du texte
}

C. Limitations

L'abus de mixins peut mener à un gonflement du fichier CSS final. Si vous incluez un mixin de 20 lignes dans 50 classes différentes, Sass copiera ces 20 lignes 50 fois dans le fichier .css. Pour des styles statiques et identiques, préférez les classes CSS classiques ou les @extend.

4. Zone de Danger

❌ Le mixin "Fourre-tout" : Créer un mixin style-element($color, $margin, $padding, $font-size, ...) avec 10 arguments. Cela devient illisible et difficile à maintenir.

✅ La bonne pratique : Créer des mixins atomiques et spécialisés (ex: un mixin pour la typographie, un pour les ombres, un pour le layout).

---

Variables vs Mixins : Quand utiliser quoi ?

Il est fréquent de confondre l'utilité des deux. Voici la règle d'or :

• Variable → Une valeur. (Ex: Une couleur, une taille de police, un délai d'animation).
• Mixin → Un groupe de propriétés. (Ex: Un ensemble de propriétés pour centrer un élément, un style de bouton, un système de grille).

Critère	Variable	Mixin
Contenu	Valeur unique	Bloc de déclarations CSS
Objectif	Cohérence des données	Réutilisation de logique/structure
Flexibilité	Statique	Dynamique (via arguments)
Impact CSS	Remplacé par la valeur	Duplique le bloc de code

---

Questions clés

1. Quelle est la différence fondamentale entre une variable Sass et une variable CSS native ?

Découvrir la réponse

La variable Sass ($var) est traitée lors de la compilation. Elle disparaît du code final pour être remplacée par sa valeur. La variable CSS (--var) existe dans le navigateur, peut être modifiée en temps réel via JavaScript et respecte la cascade CSS.

2. Pourquoi utiliser des arguments par défaut dans un mixin ?

Découvrir la réponse

Cela permet de simplifier l'appel du mixin pour les cas les plus courants tout en gardant la possibilité de personnaliser le style pour des cas particuliers. Cela réduit la verbosité du code.

3. Que se passe-t-il si j'utilise trop de mixins volumineux dans mon projet ?

Découvrir la réponse

Le fichier CSS compilé augmentera considérablement en taille (bloat), car Sass duplique physiquement le code du mixin à chaque @include. Cela peut ralentir le chargement de la page.

4. Pourquoi est-il déconseillé de nommer une variable $blue ?

Découvrir la réponse

C'est un problème de sémantique. Si le design évolue et que la couleur principale devient du rouge, vous vous retrouverez avec $blue: red;, ce qui rend le code confus et contre-intuitif pour les autres développeurs.

---

Mise en pratique

Exercice 1 : Reproduction guidée

Objectif : Créer un système de couleurs simple.

HTML de départ :

<div class="box">
  <p>Contenu principal</p>
</div>
<div class="box-highlight">
  <p>Contenu mis en avant</p>
</div>

1. Définissez trois variables : $color-primary (bleu), $color-secondary (gris) et $color-accent (orange).
2. Créez une classe .box qui utilise $color-primary pour le fond et $color-secondary pour la bordure.
3. Créez une classe .box-highlight qui utilise les mêmes variables mais avec $color-accent pour le texte.

Conseil

Vous remarquerez dans la solution que .box et .box-highlight partagent background-color, border et padding. C'est une duplication. Pour aller plus loin, essayez de créer un mixin box-base qui regroupe ces propriétés communes, puis appelez-le dans les deux classes avec @include.

Découvrir la solution commentée

// Définition des variables
$color-primary: #3498db;
$color-secondary: #bdc3c7;
$color-accent: #e67e22;

.box {
  background-color: $color-primary;
  border: 2px solid $color-secondary;
  padding: 20px;
  color: white;
}

.box-highlight {
  // On réutilise les variables pour maintenir la cohérence
  background-color: $color-primary;
  border: 2px solid $color-secondary;
  padding: 20px;
  color: $color-accent; // Couleur d'accentuation pour le texte
  font-weight: bold;
}

Exercice 2 : Adaptation

Objectif : Transformer un code répétitif en mixin.

HTML de départ :

<div class="card-1">
  <span>Titre de la carte</span>
  <button>Action</button>
</div>
<div class="card-2">
  <span>Titre de la carte</span>
  <button>Action</button>
</div>

Voici un code CSS classique :

.card-1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.card-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

Consigne : Créez un mixin nommé card-layout qui gère la structure Flexbox et le padding. Ajoutez un argument $shadow-intensity pour gérer la valeur de l'ombre.

Découvrir la solution commentée

// Mixin avec un argument pour l'ombre
@mixin card-layout($shadow-intensity) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  box-shadow: $shadow-intensity;
}

.card-1 {
  @include card-layout(0 2px 5px rgba(0,0,0,0.1));
}

.card-2 {
  @include card-layout(0 4px 10px rgba(0,0,0,0.2));
}

Exercice 3 : Conception

Objectif : Créer un système de typographie flexible.

HTML de départ :

<p class="text-caption">Note de bas de page — source inconnue.</p>
<p class="text-body">Paragraphe standard du contenu principal.</p>
<h2 class="text-title">Titre principal de la section</h2>

1. Créez des variables pour trois tailles de police : $font-sm, $font-md, $font-lg.
2. Créez un mixin text-style qui prend deux arguments : $size (la taille) et $weight (le poids, avec une valeur par défaut normal).
3. Appliquez ce mixin pour créer trois classes : .text-caption (petit, normal), .text-body (moyen, normal) et .text-title (grand, gras).

Découvrir la solution commentée

// 1. Variables de tailles
$font-sm: 0.8rem;
$font-md: 1rem;
$font-lg: 1.5rem;

// 2. Mixin flexible
@mixin text-style($size, $weight: normal) {
  font-size: $size;
  font-weight: $weight;
}

// 3. Application
.text-caption {
  @include text-style($font-sm); // Utilise le poids 'normal' par défaut
}

.text-body {
  @include text-style($font-md);
}

.text-title {
  @include text-style($font-lg, bold); // Surcharge le poids pour mettre en gras
}