SASS vs CSS Custom Properties - quand utiliser quoi ?

Bienvenue dans une nouvelle salle de la sagesse égyptienne ! Je suis Mohamed, et aujourd'hui nous allons révéler l'un des secrets les plus importants du CSS moderne - la différence entre les variables SASS et les CSS Custom Properties natives (aussi appelées variables CSS).

Tout comme les anciens Égyptiens disposaient de différents outils pour différents usages - certains pour construire les pyramides, d'autres pour dessiner des hiéroglyphes - nous aussi disposons de différents outils pour gérer les valeurs en CSS. Explorons-les !

Les variables SASS - compilées au moment du build

Les variables SASS sont traitées au moment de la compilation. Cela signifie qu'avant que ton code n'atteigne le navigateur, SASS remplace toutes les variables par des valeurs concrètes.

1// Variables SASS - moment de la compilation
2$primary-color: #3498db;
3$spacing-unit: 8px;
4$font-stack: 'Roboto', sans-serif;
5
6.button {
7  background: $primary-color;
8  padding: $spacing-unit * 2;
9  font-family: $font-stack;
10}

Après compilation en CSS :

1.button {
2  background: #3498db;
3  padding: 16px;
4  font-family: 'Roboto', sans-serif;
5}

Comme tu peux le voir, les variables SASS disparaissent dans le CSS final - il ne reste que des valeurs concrètes. C'est comme des hiéroglyphes qui, une fois traduits, deviennent du texte ordinaire.

Les CSS Custom Properties - dynamiques à l'exécution

Les CSS Custom Properties fonctionnent dans le navigateur en temps réel. Ce sont de véritables variables CSS qui peuvent être modifiées dynamiquement !

1/* CSS Custom Properties - runtime, dynamique ! */
2:root {
3  --primary-color: #3498db;
4  --spacing-unit: 8px;
5  --font-stack: 'Roboto', sans-serif;
6}
7
8.button {
9  background: var(--primary-color);
10  padding: calc(var(--spacing-unit) * 2);
11  font-family: var(--font-stack);
12}

La différence : ces variables restent dans le CSS final et peuvent être modifiées dynamiquement via JavaScript !

1// Tu peux modifier les CSS Custom Properties à l'exécution !
2document.documentElement.style.setProperty('--primary-color', '#e74c3c');
3
4// Les variables SASS NE PEUVENT PAS être modifiées à l'exécution - elles sont déjà compilées !

Différences clés

1. Portée

Variables SASS :

1$global-color: blue;
2
3.foo {
4  $local-color: green;
5  color: $local-color; // fonctionne
6}
7
8.bar {
9  color: $local-color; // ERREUR ! Variable non disponible
10}

CSS Custom Properties :

1:root {
2  --global-color: blue;
3}
4
5.foo {
6  --local-color: green;
7  color: var(--local-color); /* fonctionne */
8}
9
10.bar {
11  color: var(--local-color); /* retombe sur la valeur par défaut ou l'héritage */
12}

Les CSS Custom Properties s'héritent le long de l'arbre du DOM - tout comme color ou font !

2. Calculs mathématiques

Variables SASS :

1$base-size: 16px;
2$large-size: $base-size * 2; // 32px - calculé pendant la compilation
3
4.element {
5  font-size: $large-size; // résultat : font-size: 32px;
6}

CSS Custom Properties :

1:root {
2  --base-size: 16px;
3}
4
5.element {
6  /* Tu dois utiliser calc() */
7  font-size: calc(var(--base-size) * 2);
8}

3. Changements dynamiques

Variables SASS - aucun support des changements dynamiques :

1// Cela NE FONCTIONNERA PAS à l'exécution !
2$theme-color: #3498db;
3
4.theme-light {
5  $theme-color: #ecf0f1; // Cela ne changera pas après le chargement de la page
6}

CSS Custom Properties - dynamisme complet :

1:root {
2  --theme-color: #3498db;
3  --background: #ffffff;
4  --text: #000000;
5}
6
7/* Thème sombre - il suffit de redéfinir les variables ! */
8[data-theme="dark"] {
9  --theme-color: #e74c3c;
10  --background: #2c3e50;
11  --text: #ecf0f1;
12}
13
14.page {
15  background: var(--background);
16  color: var(--text);
17}

Tu peux changer de thème avec une seule ligne de JavaScript :

1document.body.setAttribute('data-theme', 'dark');

Exemples pratiques - quand utiliser quoi ?

Utilise les variables SASS quand :

1. Tu as besoin de mixins et de fonctions

1$primary-color: #3498db;
2
3@mixin button-variant($color) {
4  background: $color;
5  border-color: darken($color, 10%);
6
7  &:hover {
8    background: darken($color, 15%);
9  }
10}
11
12.btn-primary {
13  @include button-variant($primary-color);
14}

2. Tu effectues des calculs complexes

1$grid-columns: 12;
2$grid-gutter: 30px;
3
4@for $i from 1 through $grid-columns {
5  .col-#{$i} {
6    width: percentage($i / $grid-columns);
7  }
8}

3. Tu as besoin d'imbrication et d'organisation du code

1$breakpoint-tablet: 768px;
2
3.header {
4  padding: 20px;
5
6  @media (min-width: $breakpoint-tablet) {
7    padding: 40px;
8  }
9
10  .nav {
11    display: flex;
12
13    &__item {
14      margin: 0 10px;
15    }
16  }
17}

Utilise les CSS Custom Properties quand :

1. Tu as besoin de changements dynamiques

1:root {
2  --primary-hue: 210;
3  --primary-saturation: 70%;
4  --primary-lightness: 50%;
5}
6
7.button {
8  background: hsl(
9    var(--primary-hue),
10    var(--primary-saturation),
11    var(--primary-lightness)
12  );
13}
14
15/* Change la teinte dynamiquement en JS */

1const slider = document.querySelector('#hue-slider');
2slider.addEventListener('input', (e) => {
3  document.documentElement.style.setProperty('--primary-hue', e.target.value);
4});

2. Tu crées un système de thèmes

1/* Thème clair */
2:root {
3  --bg-primary: #ffffff;
4  --bg-secondary: #f8f9fa;
5  --text-primary: #212529;
6  --text-secondary: #6c757d;
7  --border-color: #dee2e6;
8}
9
10/* Thème sombre */
11[data-theme="dark"] {
12  --bg-primary: #212529;
13  --bg-secondary: #343a40;
14  --text-primary: #f8f9fa;
15  --text-secondary: #adb5bd;
16  --border-color: #495057;
17}
18
19/* Les composants utilisent les mêmes variables */
20.card {
21  background: var(--bg-primary);
22  color: var(--text-primary);
23  border: 1px solid var(--border-color);
24}

3. Tu as besoin de l'héritage des valeurs dans les composants

1.card {
2  --card-padding: 1rem;
3  --card-bg: white;
4
5  padding: var(--card-padding);
6  background: var(--card-bg);
7}
8
9.card--large {
10  --card-padding: 2rem; /* Redéfinir uniquement le padding */
11}
12
13.card--dark {
14  --card-bg: #2c3e50; /* Redéfinir uniquement l'arrière-plan */
15}

La meilleure solution : utiliser les deux !

Tout comme les anciens Égyptiens utilisaient différents matériaux pour construire leurs merveilles architecturales, toi aussi tu devrais combiner la puissance de SASS et des CSS Custom Properties !

Stratégie hybride :

1// _variables.scss - variables SASS pour la configuration du projet
2$color-blue-500: #3498db;
3$color-red-500: #e74c3c;
4$spacing-base: 8px;
5
6// Générer des CSS Custom Properties à partir des variables SASS
7:root {
8  // Couleurs
9  --color-primary: #{$color-blue-500};
10  --color-danger: #{$color-red-500};
11
12  // Espacement
13  --spacing-xs: #{$spacing-base * 0.5};
14  --spacing-sm: #{$spacing-base};
15  --spacing-md: #{$spacing-base * 2};
16  --spacing-lg: #{$spacing-base * 3};
17}
18
19// Utiliser SASS pour générer des variantes
20@mixin generate-spacing-utilities {
21  @each $size, $value in (
22    'xs': var(--spacing-xs),
23    'sm': var(--spacing-sm),
24    'md': var(--spacing-md),
25    'lg': var(--spacing-lg)
26  ) {
27    .p-#{$size} {
28      padding: #{$value};
29    }
30    .m-#{$size} {
31      margin: #{$value};
32    }
33  }
34}
35
36@include generate-spacing-utilities;

Exemple pratique - système de typographie responsive :

1// SASS - configuration et breakpoints
2$breakpoint-sm: 576px;
3$breakpoint-md: 768px;
4$breakpoint-lg: 992px;
5
6:root {
7  // Taille de police de base - peut être modifiée par les préférences utilisateur
8  --font-size-base: 16px;
9
10  // Échelle typographique
11  --font-size-xs: 0.75rem;
12  --font-size-sm: 0.875rem;
13  --font-size-md: 1rem;
14  --font-size-lg: 1.125rem;
15  --font-size-xl: 1.25rem;
16  --font-size-2xl: 1.5rem;
17  --font-size-3xl: 2rem;
18}
19
20// Mixin SASS pour une typographie responsive
21@mixin responsive-font-size($min, $max, $min-vw: $breakpoint-sm, $max-vw: $breakpoint-lg) {
22  font-size: $min;
23
24  @media (min-width: $min-vw) {
25    font-size: calc(#{$min} + (#{$max} - #{$min}) * ((100vw - #{$min-vw}) / (#{$max-vw} - #{$min-vw})));
26  }
27
28  @media (min-width: $max-vw) {
29    font-size: $max;
30  }
31}
32
33.heading {
34  @include responsive-font-size(var(--font-size-xl), var(--font-size-3xl));
35}

Tu peux maintenant changer la taille de police pour les utilisateurs ayant des préférences d'accessibilité :

1// L'utilisateur choisit des polices plus grandes
2document.documentElement.style.setProperty('--font-size-base', '20px');

Récapitulatif - règles d'or

Utilise les variables SASS pour :

• La configuration du projet (couleurs de base, breakpoints, valeurs constantes)
• Les mixins et les fonctions (code réutilisable, calculs)
• L'organisation du code (partials, imbrication, @extend)
• La compilation (génération de classes utilitaires, boucles @for/@each)

Utilise les CSS Custom Properties pour :

• Les changements dynamiques (thèmes, préférences utilisateur)
• L'héritage contextuel (composants, valeurs imbriquées)
• Les interactions JavaScript (animations, éléments interactifs)
• Les calculs à l'exécution (valeurs responsives, typographie fluide)

Hybride (meilleure approche) :

1// Configuration en SASS
2$colors: (
3  'blue': #3498db,
4  'red': #e74c3c,
5  'green': #27ae60
6);
7
8// Générer des CSS Custom Properties
9:root {
10  @each $name, $color in $colors {
11    --color-#{$name}: #{$color};
12    --color-#{$name}-light: #{lighten($color, 10%)};
13    --color-#{$name}-dark: #{darken($color, 10%)};
14  }
15}
16
17// Utiliser dans les composants
18.button {
19  background: var(--color-blue);
20
21  &:hover {
22    background: var(--color-blue-dark);
23  }
24}
25
26// En JavaScript, tu peux modifier dynamiquement
27document.documentElement.style.setProperty('--color-blue', '#2ecc71');

Exercice pratique

Crée un système de thèmes qui combine SASS et CSS Custom Properties :

1. Utilise SASS pour définir les couleurs de base et générer des variantes
2. Crée des CSS Custom Properties pour les thèmes clair et sombre
3. Ajoute un bouton qui bascule entre les thèmes via JavaScript
4. Utilise des mixins SASS pour créer des composants qui utilisent des variables CSS

Tout comme les pharaons combinaient différents matériaux pour construire leurs monuments, toi aussi tu devrais combiner la puissance de SASS et des CSS Custom Properties pour créer un système de styles puissant, flexible et facile à maintenir !

1<!DOCTYPE html>
2<html lang="en">
3<head><title>Projet formulaire</title></head>
4<body style="background:#d4a574;font-family:serif;padding:20px;color:#3d2914">
5<h1>Projet formulaire</h1>
6<p>Crée un formulaire d'inscription de scribe !</p>
7</body>
8</html>

Bonne chance, jeune bâtisseur de hiéroglyphes CSS !