var(--xyz) est utilisée en CSS (feuilles de style en cascade) pour faire référence à une variable CSS personnalisée.Décomposition de
var(--xyz) :
var(...): C’est la fonction CSS qui permet d’utiliser une variable personnalisée.--xyz: C’est le nom de la variable CSS. Toutes les variables personnalisées commencent par--.
Exemple d'utilisation
code : Tout sélectionner
:root {
--main-color: #3498db;
--padding: 1rem;
}
.box {
background-color: var(--main-color);
padding: var(--padding);
}
--main-colorvaut#3498db.var(--main-color)insère cette valeur où elle est utilisée.- Si une variable n'est pas définie, on peut fournir une valeur de repli :
code : Tout sélectionner
color: var(--text-color, black); /* Si --text-color n'existe pas, ce sera noir */
À retenir
- Les variables CSS sont définies dans un sélecteur CSS (souvent :root pour qu’elles soient globales).
var(--xyz)permet d'utiliser la variable.- C’est très utile pour la thématisation, le réglage des espacements, ou la cohérence visuelle dans un design.
Pourquoi utiliser des variables CSS ?
Tout d’abord, l’utilisation de variables CSS permet d’avoir une meilleure lisibilité. Qui sait ce que veut dire « #3498db » ? Pas grand monde !
Par contre, si j’enregistre cette valeur hexadécimale dans une variable appelée « main-color », il est bien plus simple de comprendre à quoi ça correspond.
Le deuxième point, sans doute le plus important, concerne la maintenance. En effet, le jour où vous voudriez utiliser une couleur un peu différente, vous allez devoir remplacer chaque ligne indiquant « #3498db » par le nouvel hexadécimale choisi. Par contre, si vous l’avez stocké dans une variable, il vous suffit de modifier la valeur de la variable pour effectuer les changements partout.