Les variables

En CSS on peut créer des propriétés personnalisées qui permettent de stocker des valeurs.

Ces propriétés doivent commencer par '--'.

1
section {
2
  --couleur: red;
3
}

On récupère ces valeurs à l'aide de la fonction var().

1
section h1 {
2
  background-color: var(--couleur);
3
}
4
5
section p {
6
  color: var(--couleur);
7
}
1
<section>
2
  <h1>J'ai un fond de couleur --couleur</h1>
3
  <p>J'ai une écriture de couleur --couleur</p>
4
</section>


 
J'ai un fond de couleur --couleur
 
J'ai une écriture de couleur --couleur
 


Principe des variables CSS
DéfinitionHéritage
Un élément accède à une variable que si une règle l'a défini pour lui ou pour un de ses parents.
1
section{
2
  --bg-color: red;
3
}
4
section.maClasse {
5
  --text-color: green;
6
}
7
p {
8
  --border: 2px solid black;
9
}
10
h1, p {
11
  background-color: var(--bg-color);
12
  color: var(--text-color);
13
  border: var(--border);
14
}
1
<section>
2
  <h1>J'ai un fond de couleur --bg-color</h1>
3
  <p>J'ai un fond de couleur --bg-color et une bordure --border</p>
4
</section>
5
<section class='maClasse'>
6
  <h1>J'ai un fond de couleur --bg-color et une écriture de couleur --text-color</h1>
7
  <p>J'ai un fond de couleur --bg-color, une écriture de couleur --text-color et une bordure --border</p>
8
</section>


 
J'ai un fond de couleur --bg-color
 
J'ai un fond de couleur --bg-color et une bordure --border
 


 
J'ai un fond de couleur --bg-color et une écriture de couleur --text-color
 
J'ai un fond de couleur --bg-color, une écriture de couleur --text-color et une bordure --border
 


Principe des variables CSS
--bg-color : toutes les sections et leurs descendants peuvent l'utiliser.
--text-color : toutes les sections de classe maClasse et leurs descendants peuvent l'utiliser.
--border : tous les paragraphes et leurs descendants peuvent l'utiliser.
Les textes ne sont pas en vert car la section n'a pas la classe maClasse. La variable n'est donc pas définie
DéfinitionDoublon
Comme pour les propriétés classique, en cas de doublon la plus roche de l'élément est prise en compte.
1
section{
2
  --bg-color: red;
3
  --bg-color: green;
4
}
5
p{
6
  --bg-color: blue;
7
}
8
9
h1, p {
10
  background-color: var(--bg-color);
11
}
1
<section>
2
  <h1>Deuxième couleur définie par section</h1>
3
  <p>Couleur définie par paragraphe</p>
4
</section>


 
Deuxième couleur définie par section
 
Couleur définie par paragraphe
 


Principe des variables CSS
DéfinitionVariable globale
Pour définir une variable potentiellement utilisable partout, on utilise la pseudo-classe :root.
1
:root{
2
  --bg-color: red;
3
  --text-color: green;
4
}