Variables CSS - Fonction var()
Variables CSS
La fonction var() est utilisée pour insérer la valeur d'une variable CSS.
Les variables CSS ont accès au DOM, ce qui signifie que vous pouvez créer des variables avec une portée locale ou globale, modifier ces variables avec JavaScript et les adapter en fonction des media queries.
Une bonne façon d'utiliser les variables CSS est pour les couleurs de votre design. Au lieu de copier et coller les mêmes couleurs encore et encore, vous pouvez les définir dans des variables.
Déclarer une Variable CSS
Les variables CSS peuvent avoir une portée globale ou locale.
Les variables globales peuvent être accessibles dans tout le document, tandis que les variables locales ne peuvent être utilisées que dans le sélecteur où elles sont déclarées.
Pour créer une variable globale, déclarez-la à l'intérieur du sélecteur :root . Le sélecteur :root correspond à l'élément racine du document.
Pour créer une variable locale, déclarez-la à l'intérieur du sélecteur qui va l'utiliser.
Un nom de variable CSS doit commencer par deux tirets (--) et est sensible à la casse !
Syntaxe
:root {
--primary-bg-color: green; /* portée globale */
}
.note {
--note-bg: yellow; /* portée locale */
} La Fonction CSS var()
La fonction var() est utilisée pour insérer la valeur d'une variable CSS déclarée.
Syntaxe
var(-- nom, valeur ) | Valeur | Description |
|---|---|
| nom | Requis. Le nom de la variable (doit commencer par deux tirets) |
| valeur | Optionnel. La valeur de secours (utilisée si la variable n'est pas trouvée) |
Les avantages d'utiliser var() sont :
- Rend le code plus facile à maintenir (simplifie les mises à jour)
- Rend le code plus facile à lire (plus compréhensible)
- Facilite le changement des valeurs de couleur pour l'ensemble de la page
Exemple de Variables CSS
Ici, nous déclarons deux variables globales (--primary-bg-color et --primary-color).
Ensuite, nous utilisons la fonction var() pour insérer la valeur des variables plus tard dans la feuille de style :
Exemple
:root {
--primary-bg-color: #1e90ff;
--primary-color: #ffffff;
}
body {
background-color: var(--primary-bg-color);
}
.container {
color: var(--primary-bg-color);
background-color: var(--primary-color);
padding: 15px;
}
.container h2 {
border-bottom: 2px solid var(--primary-bg-color);
}
.container .note {
border: 1px solid var(--primary-bg-color);
padding: 10px;
} Pour changer l'apparence de la page, il vous suffit de modifier les deux valeurs des variables :
Exemple
:root {
--primary-bg-color: #8FBC8F;
--primary-color: #FFFAF0;
}
body {
background-color: var(--primary-bg-color);
}
.container {
color: var(--primary-bg-color);
background-color: var(--primary-color);
padding: 15px;
}
.container h2 {
border-bottom: 2px solid var(--primary-bg-color);
}
.container .note {
border: 1px solid var(--primary-bg-color);
padding: 10px;
} Fonction CSS var()
| Fonction | Description |
|---|---|
| var() | Insère la valeur d'une variable CSS |