Valentin Dupas

💡 If this is the first course you read from me, please read this small thing : about my courses

Les variables

Il est possible de définir des valeurs clefs dans notre CSS avec --monNom comme ceci

body {
  --small: 8px;
  --medium: 16px;
  --big: 32px;
}

Pour pouvoir les réutiliser par la suite on utilise avec var(--monNom), comme ceci

article {
  padding: var(--medium);
  border: 1px solid black;
  margin: var(--big);
}

En utilisant ça, on y gagne que tous les éléments faisant usage de ces valeurs resteront consistants. En admettant que j'utilise ces 3 valeurs pour tous les espacements de ma page et qu'ils ne conviennent pas, alors j'ai juste besoin de changer la valeur de mes variables.

Bien sur, il est possible de faire ça avec d'autres types de valeurs, et pas uniquement des longueurs

body {
  --primary: #3aa63f;
  --accent: #a8d47a;
}

Un exemple de thème

Un exemple sympa et pas directement évident dès le début, les thèmes!

Ce qu'on peut faire c'est définir une collection de variables par défaut et une collection de variable par thème.

body {
  --text: #222323;
  --background: #f0f6f0;
  --primary: #222323;
  --link: #1b4699;
  --visited: #4d4daa;
}

body.dark {
  --text: #f0f6f0;
  --background: #222323;
  --primary: #f0f6f0;
  --link: #7eb0f0;
  --visited: #b0b0ff;
}

body.mint {
  --text: #ffffff;
  --background: #201b1b;
  --primary: #96fbc7;
  --link: #bb7749;
  --visited: #bb8764;
}

body {
  color: var(--text);
  background-color: var(--background);
}

a {
  color: var(--link);
}
a:visited {
  color: var(--visited);
}

Notez que body.dark veut dire "les <body> ayant la classe "dark"". Il faudrait qu'il y ait un espace entre body et .dark pour que ce soit "les éléments de classe "dark" dans le <body>".

Et donc, avec le CSS ci-dessus, si mon <body> a une classe dark, mint , ou aucune de ces classes, alors le thème changera parce qu'on utilisera la même collection de variables mais pas avec les mêmes valeurs.

Notez que cet exemple n'est pas poussé jusqu'au bout, parce qu'il faudrait qu'on connaisse un peu de javascript, et aussi on ne prend pas en compte les préférences light/dark de l'utilisateur.