Apprendre CSS : Utiliser des Variables

Qu’est-ce qu’une variable CSS ?

Une variable CSS est similaire aux variables utilisées dans le monde de la programmation. Elles permettent de définir des conteneurs nommés stockant des valeurs à utiliser dans nos règles CSS.

Travailler avec des variables CSS permet de bénéficier de nombreux avantages :

• Rassembler son design system (couleurs, typos…) pour plus de clarté
• Respecter le principe du DRY (Dont Repeat Yourself) en ne dupliquant pas des valeurs identiques
• Simplifier la maintenance de son code

Déclaration d’une variable CSS

Syntaxe

Toute variable CSS est précédée de deux tirets --, suivie de son nom. Le nom d’une variable doit être le plus explicite possible vis-à-vis de la valeur stockée.

La valeur stockée correspond à une valeur de propriété CSS.

--color-primary: #5b47f0;
--color-secondary: #0f172a;
--typo: 'Poppins', sans-serif;

Portée

La portée d’une variable définit l’espace dans lequel les variables vont être accessibles. Les variables CSS peuvent avoir une portée soit globale, soit locale.

Variable globale

Pour qu’une variable soit accessible n’importe où dans notre feuille CSS (à l’intérieur de n’importe quel sélecteur), on la définira dans un sélecteur global nommé :root.

:root {
	--color-primary: #5b47f0;
	--color-secondary: #0f172a;
	--typo: 'Poppins', sans-serif;
}

Variable locale

Pour qu’une variable soit accessible uniquement pour un sélecteur précis, on la définira au sein du sélecteur en question.

.btn {
	--bg-color: #5b47f0;
	--text-color: #ffffff;
}

Utilisation

Pour appeler ces variables dans une règle CSS, on fait appel à la variable souhaitée en argument de la fonction var().

body > header {
	background-color: var(--color-secondary);
}