SCSS Variables : Définition, Syntaxe et Exemples Concrets

Vous en avez marre de chercher et remplacer la même valeur de couleur dans des centaines de lignes de code CSS ? Vous souhaitez changer une police ou un espacement sans devoir tout vérifier manuellement ? Les variables SCSS sont l’un des outils qui règlent ce problème.

Ce guide vous explique comment utiliser les variables SCSS pour écrire un code plus propre, plus simple et plus facile à maintenir. Nous verrons la syntaxe de base, la différence avec les variables CSS natives et des cas d’usage concrets. Pour plus de détails techniques, la documentation officielle de Sass est toujours une bonne référence.

Qu’est-ce qu’une Variable SCSS ? (Syntaxe de base)

Une variable SCSS est simplement une façon de stocker une information que vous voulez réutiliser. Pensez-y comme une boîte avec une étiquette : vous mettez une valeur dedans (une couleur, une taille de police) et vous utilisez l’étiquette partout où vous en avez besoin. Si vous changez le contenu de la boîte, la valeur change partout.

En SCSS, la syntaxe est simple : une variable commence toujours par un symbole dollar ($). Vous lui donnez un nom, puis vous lui assignez une valeur. Voici une déclaration de base.

// Déclaration de variables
$primary-color: #3498db;
$font-size-base: 16px;
$border-style: 1px solid #ccc;

// Utilisation de ces variables
body {
  background-color: #fff;
  color: $primary-color;
  font-size: $font-size-base;
}

.container {
  border: $border-style;
  border-radius: 5px;
}

Dans cet exemple, si vous décidez de changer votre couleur principale, vous n’avez qu’à modifier la ligne $primary-color, et la nouvelle couleur sera appliquée partout où la variable est utilisée. Fini la répétition fastidieuse.

SCSS Variables vs CSS Custom Properties : Le Tableau Comparatif

Il est important de ne pas confondre les variables SCSS (Sass) avec les variables CSS natives, aussi appelées « Custom Properties ». Bien qu’elles semblent similaires, leur fonctionnement est très différent. Le premier type de variables n’existe que pendant le développement, tandis que le second existe dans le navigateur de l’utilisateur.

Ce tableau résume les différences clés pour vous aider à choisir le bon outil pour le bon travail.

Caractéristique	Variables SCSS	Variables CSS (Custom Properties)
Syntaxe	`$variable: valeur;`	`--variable: valeur;` puis `var(--variable)`
Compilation	Compilées en CSS. N’existent pas dans le navigateur.	Interprétées par le navigateur. Existent dans le DOM.
Portée (Scope)	Lexicale (dépend de l’imbrication dans le code SCSS).	En cascade (héritées par les enfants dans le DOM).
Typage	Fort (couleurs, nombres, listes). Permet les calculs directs.	Chaînes de caractères. Calculs via la fonction `calc()`.
Modification JS	Impossible après compilation.	Modifiables dynamiquement avec JavaScript.

Quand utiliser l’une ou l’autre ?

Le choix dépend de ce que vous voulez faire. Les variables SCSS sont parfaites pour structurer votre code, définir une architecture de style et gérer des valeurs qui ne changeront pas une fois le site chargé. Elles sont utiles pour la maintenabilité de votre code source.

Les variables CSS, elles, sont idéales pour le theming dynamique. Si vous voulez permettre à l’utilisateur de changer de thème (par exemple, un mode sombre) sans recharger la page, les variables CSS sont la solution. Elles peuvent être modifiées en temps réel avec JavaScript.

La Portée des Variables (Scope) : Globale vs Locale

La « portée » (ou « scope ») d’une variable définit où elle peut être utilisée. En SCSS, il y a principalement deux types de portée : globale et locale.

Portée globale

Une variable déclarée en dehors de tout sélecteur est globale. Elle est accessible depuis n’importe où dans vos fichiers SCSS, à condition que le fichier soit importé (avec `@import` ou `@use`).

$text-color: #333; // Variable globale

body {
  color: $text-color; // Fonctionne
}

.header {
  color: $text-color; // Fonctionne aussi
}

Portée locale

Une variable déclarée à l’intérieur d’un sélecteur est locale. Elle ne peut être utilisée que dans ce sélecteur et ses enfants. Essayer de l’utiliser ailleurs provoquera une erreur de compilation.

.alert {
  $alert-color: #e74c3c; // Variable locale
  background-color: $alert-color; // Fonctionne
}

body {
  // color: $alert-color; // ERREUR : variable non définie ici
}

Forcer la portée globale avec `!global`

Parfois, vous pourriez avoir besoin de modifier une variable globale depuis un scope local. Pour cela, on utilise le flag `!global`. C’est souvent utilisé dans les mixins ou les fonctions pour mettre à jour un état global.

$theme-color: blue; // Globale

.dark-theme {
  $theme-color: black !global; // Modifie la variable globale
}

// Après compilation (si .dark-theme est utilisé), $theme-color sera "black"
body {
  color: $theme-color;
}

Cas d’Usage Concrets et Techniques Avancées

Les variables SCSS permettent bien plus que de stocker des couleurs. Voici des exemples de ce qu’il est possible de faire pour rendre votre code plus puissant.

Centraliser les Design Tokens

Les « Design Tokens » sont toutes les valeurs de base de votre design system : couleurs, typographie, espacements, ombres. Les centraliser dans des variables rend votre projet cohérent et facile à mettre à jour.

// _variables.scss
$color-brand: #5e35b1;
$color-text: #212529;
$font-family-sans: "Helvetica Neue", Arial, sans-serif;
$spacing-medium: 16px;
$border-radius-default: 4px;

Utiliser des Opérations Mathématiques

SCSS comprend les nombres et les unités. Vous pouvez donc effectuer des calculs directement dans vos variables. C’est très pratique pour créer des grilles ou des espacements proportionnels.

$base-font-size: 1rem;
$base-spacing: 20px;

h1 {
  font-size: $base-font-size * 2; // Résultat : 2rem
}

.container {
  padding: $base-spacing; // 20px
  margin-bottom: $base-spacing * 1.5; // 30px
}

Le Flag `!default` pour des Frameworks Configurables

Le flag !default est très utile si vous créez une library CSS ou un framework. Il assigne une valeur à une variable seulement si cette variable n’a pas déjà une valeur. Cela permet aux utilisateurs de votre library de surcharger facilement vos valeurs par défaut.

// Dans votre library
$primary-color: #3498db !default;

// Dans le fichier de l'utilisateur (importé avant votre library)
$primary-color: #9b59b6; // Cette valeur sera utilisée

// Utilisation
.button {
  background-color: $primary-color; // Sera #9b59b6
}

L’interpolation `#{…}`

L’interpolation permet d’insérer la valeur d’une variable dans une chaîne de caractères, comme un nom de sélecteur ou une media query. La syntaxe est #{$variable_name}.

$breakpoint-md: "768px";
$icon-name: "error";

@media (min-width: #{$breakpoint-md}) {
  body {
    font-size: 18px;
  }
}

.icon-#{$icon-name} { // Le code CSS compilé sera .icon-error
  background-image: url("/icons/#{$icon-name}.svg");
}

5 Bonnes Pratiques pour Gérer vos Variables SCSS

Pour tirer le meilleur parti des variables, il est bon de suivre quelques règles simples.

Centraliser dans un fichier partiel : Placez toutes vos variables globales dans un fichier unique, souvent nommé _variables.scss. Ensuite, utilisez @use ou @import pour l’inclure là où vous en avez besoin. Cela garde votre projet organisé.
Nommer les variables de manière sémantique : Utilisez des noms qui décrivent la fonction de la variable, pas sa valeur. Par exemple, $color-error est mieux que $red. Si un jour votre couleur d’erreur devient orange, le nom aura toujours du sens.
Utiliser des variables pour les media queries : Définir vos points de rupture (breakpoints) dans des variables rend vos media queries plus lisibles et faciles à maintenir. Exemple : @media (max-width: $breakpoint-mobile).
Commenter les variables complexes : Si une variable dépend d’un calcul complexe ou a une fonction très spécifique, ajoutez un petit commentaire pour expliquer son rôle. Vos collègues (et votre futur vous) vous remercieront.
Préférer les variables CSS pour le theming : Pour les éléments qui doivent changer dynamiquement côté client (comme un mode sombre), utilisez les variables CSS natives (--primary-color: #...). Elles sont conçues pour ça.

FAQ – Questions Fréquentes sur les Variables SCSS

Quelle est la différence principale entre une variable SCSS et une variable CSS ?

La variable SCSS est compilée en une valeur statique dans le fichier CSS final. La variable CSS (custom property) reste une variable dans le navigateur et peut être modifiée dynamiquement.

Comment définir une variable globale en SCSS ?

Vous devez la déclarer en dehors de tout sélecteur, généralement à la racine de votre fichier de variables principal (_variables.scss).

Peut-on utiliser des calculs dans les variables SCSS ?

Oui, SCSS supporte les opérations mathématiques de base (+, -, *, /) directement sur les variables numériques. Par exemple : $width: 100px * 2;.

À quoi sert `!default` en SCSS ?

Le flag `!default` permet d’assigner une valeur par défaut à une variable. Cette valeur ne sera utilisée que si la variable n’a pas déjà été définie auparavant.

Comment utiliser une variable SCSS dans un nom de classe ?

Il faut utiliser l’interpolation avec la syntaxe #{$variable}. Par exemple, .btn-#{$type} deviendra .btn-primary si $type a pour valeur « primary ».