Variables CSS de remplacement
Remplacer une variable globale par une variable locale
Dans la page précédente, nous avons appris que 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.
Parfois, nous voulons que les variables changent uniquement dans une section spécifique de la page.
Supposons que nous souhaitions une couleur de bordure différente pour les éléments <p class="note">. Nous pouvons alors redéclarer la variable --primary-bg-color à l'intérieur du sélecteur .note. Lorsque nous utilisons var(--primary-bg-color) dans ce sélecteur, il utilisera la valeur de la variable locale --primary-bg-color déclarée ici.
Nous voyons que la variable locale --primary-bg-color remplacera la variable globale --primary-bg-color pour le sélecteur .note :
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 {
--primary-bg-color: red; /* la variable locale remplacera la variable globale */
border: 1px solid var(--primary-bg-color);
padding: 10px;
} Ajouter une nouvelle variable locale
Si une variable doit être utilisée uniquement à un seul endroit, nous pourrions également déclarer une nouvelle variable locale, comme ceci :
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 {
--note-border-color: red; /* nouvelle variable locale */
border: 1px solid var(--note-border-color);
padding: 10px;
} Fonction CSS var()
| Fonction | Description |
|---|---|
| var() | Insère la valeur d'une variable CSS |