Tout savoir sur les variables CSS (custom properties)

Les variables CSS ont révolutionné la manière de gérer les styles dans le développement web.

Si vous en avez assez de répéter les mêmes valeurs CSS partout dans votre code, alors cet article est fait pour vous !

Vous allez découvrir ici comment les utiliser efficacement, pourquoi elles sont si pratiques et comment elles se comparent aux solutions comme Sass et LESS.

Allons-y !

Qu'est-ce qu'une variable CSS ?

Une variable CSS (aussi appelée "propriété personnalisée") est un moyen de stocker des valeurs réutilisables dans votre feuille de style.

Imaginez-la comme une boîte où vous pouvez ranger une couleur, une taille de police ou n'importe quelle autre valeur CSS, puis la réutiliser où vous le souhaitez.

Comment déclarer et utiliser des variables CSS ?

Déclarer une variable CSS

Les variables CSS sont généralement définies au sein du sélecteur :root.

Ce sélecteur représente le niveau le plus élevé de votre document et les variables ainsi définies seront accessibles partout dans votre fichier CSS.

Dans cet exemple, deux variables sont créées : --main-color et --font-size.

Elles sont définies respectivement avec une couleur et une taille de police.

Utiliser une variable CSS

Pour utiliser une variable, vous devez appeler la fonction var().

Celle-ci prend le nom de la variable en argument et l'injecte dans les propriétés CSS que vous souhaitez modifier.

Ici, var(--main-color) applique la couleur principale définie à l'arrière-plan du body, tandis que var(--font-size) ajuste la taille du texte.

Variables CSS avec des valeurs de secours

Vous pouvez également fournir une ...
[Courte citation de 8% de l'article original]