Variables couvertes CSS

Remplacer une variable globale par une variable locale

De la page précédente, nous avons appris que les variables globales peuvent être accédées / utilisées 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.

Voyons l'exemple de la page précédente :

Exemple

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Essayer vous-même

Parfois, nous souhaitons que la variable ne change que dans une partie spécifique de la page.

Supposons que nous voulions que l'élément button utilise une couleur bleue différente. Alors, nous pouvons redéclarer la variable --blue dans le sélecteur button. Lorsque nous utilisons var(--blue) dans ce sélecteur, il utilisera la valeur de la variable --blue locale déclarée ici.

Nous voyons que la variable --blue locale couvre la variable --blue globale de l'élément button :

Exemple

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  --blue: #0000ff;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Essayer vous-même

Ajouter une nouvelle variable locale

Si une variable est utilisée à un seul endroit, nous pouvons également déclarer une nouvelle variable locale, comme suit :

Exemple

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  --button-blue: #0000ff;
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}

Essayer vous-même

Prise en charge du navigateur

Les nombres dans le tableau indiquent la version du navigateur qui prend en charge pleinement cette propriété.

Fonction
var() 49.0 15.0 31.0 9.1 36.0

Fonction var() CSS

Fonction Description
var() Insérer la valeur de la variable CSS.