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 '--'.

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
section {
2
  --couleur: red;
3
}
section {
  --couleur: red;
}

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

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
section h1 {
2
  background-color: var(--couleur);
3
}
4
5
section p {
6
  color: var(--couleur);
7
}
section h1 {
  background-color: var(--couleur);
}

section p {
  color: var(--couleur);
}
num. | Ligne | texte | copie | 
CTRL+C pour copier, CTRL+V pour coller
1
<section>
2
  <h1>J'ai un fond de couleur --couleur</h1>
3
  <p>J'ai une écriture de couleur --couleur</p>
4
</section>
<section>
  <h1>J'ai un fond de couleur --couleur</h1>
  <p>J'ai une écriture de couleur --couleur</p>
</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.
num. | Ligne | texte | copie | 
CTRL+C pour copier, CTRL+V pour coller
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
}
section{
  --bg-color: red;
}
section.maClasse {
  --text-color: green;
}
p {
  --border: 2px solid black;
}
h1, p {
  background-color: var(--bg-color);
  color: var(--text-color);
  border: var(--border);
}
num. | Ligne | texte | copie | 
CTRL+C pour copier, CTRL+V pour coller
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>
<section>
  <h1>J'ai un fond de couleur --bg-color</h1>
  <p>J'ai un fond de couleur --bg-color et une bordure --border</p>
</section>
<section class='maClasse'>
  <h1>J'ai un fond de couleur --bg-color et une écriture de couleur --text-color</h1>
  <p>J'ai un fond de couleur --bg-color, une écriture de couleur --text-color et une bordure --border</p>
</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.
num. | Ligne | texte | copie | 
CTRL+C pour copier, CTRL+V pour coller
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
}
section{
  --bg-color: red;
  --bg-color: green;
}
p{
  --bg-color: blue;
}

h1, p {
  background-color: var(--bg-color);
}
num. | Ligne | texte | copie | 
CTRL+C pour copier, CTRL+V pour coller
1
<section>
2
  <h1>Deuxième couleur définie par section</h1>
3
  <p>Couleur définie par paragraphe</p>
4
</section>
<section>
  <h1>Deuxième couleur définie par section</h1>
  <p>Couleur définie par paragraphe</p>
</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.
num. | Ligne | texte | copie | 
CTRL+C pour copier, CTRL+V pour coller
1
:root{
2
  --bg-color: red;
3
  --text-color: green;
4
}
:root{
  --bg-color: red;
  --text-color: green;
}