Les variables CSS

Introduction Introduction

Les variables CSS permettent de stocker des valeurs pour les réutiliser dans un fichier CSS.

Les variables CSS permettent de simplifier le code et de le rendre plus lisible notamment pour un Design System.

Déclaration des variables CSS Déclaration des variables CSS

Pour déclarer simplement une variable CSS, il suffit d’utiliser le préfixe ’—’ suivi du nom de la variable.

:root {
  --main-bg-color: pink;
}

Elles peuvent être déclarées globalement dans le :root{} ou localement dans un sélecteur.

La portée des variables CSS est limitée à l’élément parent.

Utilisation des variables CSS Utilisation des variables CSS

Pour utiliser une variable CSS, il suffit de l’appeler avec la fonction var() en lui passant le nom de la variable en paramètre.

:root {
  --main-bg-color: hsla(0, 100%, 50%, 0.5);
}

.box {
  background-color: var(--main-bg-color);
}

Les variables CSS peuvent être utilisées dans la plupart des valeurs de propriétés CSS.

La plupart des valeurs de propriétés CSS
Les fonctions math CSS (calc(), min(), max(), clamp(), etc.)
les media queries
les animations et transitions

Valeurs par défaut Valeurs par défaut

Lorsqu’une variable CSS est utilisée mais non définie, on peut lui fournir une valeur par défaut.

Il est aussi possible de définir une suite de valeurs pour une variable CSS.

:root {
  --main-bg-color: red;
  --main-color: blue;
}

.box {
  background-color: var(--main-bg-color, blue);
  color: var(--main-color, var(--main-bg-color, blue));
}

Les types de variables CSS Les types de variables CSS

On peut stocker différents types de données (nombres, couleurs, chaînes de caractères, url, valeurs calculées, etc.) dans une variable CSS.

:root {
  --all-padding: 10px 20px 30px 40px;
  --boolean: false;
  --math: sqrt(pow(var(--all-padding), 2) + pow(var(--all-padding), 2));
  --string: 'Hello, World!';
  --url: url('https://www.example.com');
  --color: #ff0000;
  --length: 100px;
  --number: 42;
  --percentage: 50%;
  --angle: 45deg;
  --time: 2s;
  --resolution: 96dpi;
  --frequency: 1Hz;
  --font: Arial, sans-serif;
  --gradient: linear-gradient(45deg, black, #222);
  --image: url('image.jpg');
  --position: center;
  --shape: circle;
  --transform: rotate(45deg);
}

mais… le type est “unknown” car rien ne nous garanti que la valeur passée à la variable est du bon type.

Erreur de type Erreur de type

Les variables CSS sont faiblement typées, imaginons un système de thème basé sur une seule couleur principale.

:root {
  --brand: blue;
  --brand-hightlight: color-mix(var(--brand) white 50%);
  --brand-shadow: color-mix(var(--brand) black 50%);
  --brand-gradient: linear-gradient(
    45deg,
    var(--brand-hightlight),
    var(--brand-shadow)
  );
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: lightblou; /* typo 😱 */
  }
}

Si une erreur de type survient, la variable est ignorée, et c’est la valeur initiale ou héritée de la propriété qui est utilisée mais si aucune valeur par défaut n’est définie, la valeur sera undefined.

Property Property

La règle @property permet de déclarer une variable CSS avec un type de données, ce qui permet de gérer les erreurs de type.

On peut également fournir une valeur par défaut et gérer l’héritage.

On déclare une custom property avec @property et son nom (—*)
On définit le type de valeur attendue avec la propriété syntax
On définit si la custom property hérite de la valeur de son parent avec la propriété inherits
On définit la valeur initiale (par défaut) de la custom property avec la propriété initial-value

@property --brand {
  syntax: '<color>';
  inherits: false;
  initial-value: blue;
}

Si nous reproduisons l’exemple précédent avec la règle @property, nous obtenons :

@property --brand {
  syntax: '<color>';
  inherits: false;
  initial-value: blue;
}
:root {
  --brand-hightlight: color-mix(var(--brand) white 50%);
  --brand-shadow: color-mix(var(--brand) black 50%);
  --brand-gradient: linear-gradient(
    45deg,
    var(--brand-hightlight),
    var(--brand-shadow)
  );
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: lightblou; /* typo 😱 */
  }
}

Dans ce cas, même si une erreur est commise, on est certain d’avoir une valeur par défaut.

Démo Démo

Voici une démo qui illustre l’erreur de type avec et sans la règle @property pour déclarer une variable CSS.

CSS Types CSS Types

<length>

<percentage>

<length-percentage>

<color>

<image>

<url>

<integer>

<number>

<angle>

<time>

<resolution>

<transform-list>

<transform-function>

Liste des types CSS

Surcharge des variables CSS Surcharge des variables CSS

Les variables CSS sont héritées par les éléments enfants. Il est possible de surcharger une variable CSS pour un élément enfant, cela permet de personnaliser les éléments enfants sans toucher aux éléments parents.

:root {
  --main-bg-color: hsla(0, 100%, 50%, 0.5);
}

.box {
  --main-bg-color: hsla(0, 50%, 50%, 0.5);
  background-color: var(--main-bg-color);
}

Gérer les déclinaisons Gérer les déclinaisons

Une des forces des variables CSS est de pouvoir déclarer des variables CSS sur un élément de base en les appliquant à ses propriétés CSS ou à ses enfants.

Et de pouvoir créer des déclinaisons sans devoir redéclarer toutes les propriétés.

Prenons l’exemple d’un composant Alert qui peut avoir plusieurs états, on définit d’abord le style base :

.alert {
  --state-color: white;
  --emoji: "C'est ok 😀";
  border: var(--state-color) 1px solid;
  background-image: linear-gradient(45deg, black, #222);
  padding: 1rem 4rem;
  border-radius: 20px;
  font-size: 2rem;
  text-align: center;
  box-shadow: 0 0 25px 5px hsla(0deg 0% 0% / 100%);
  display: flex;
  .message {
    font-size: 1rem;
    color: var(--state-color);
    &::before {
      content: var(--emoji);
    }
  }
}

Une mauvaise pratique serait de tout redéclarer pour chaque état :

Don't

.alert--success {
  --state-color: green;
  --emoji: 'Succès 😎';
  border: var(--state-color) 1px solid;
  .message {
    color: var(--state-color);
    &::before {
      content: var(--emoji);
    }
  }
}

Do

.alert--success {
  --state-color: green;
  --emoji: 'Succès 😎';
}

Démo Démo

Alternative aux boucles SASS Alternative aux boucles SASS

Les variables CSS permettent de créer des boucles CSS sans avoir à utiliser de préprocesseur CSS.

Démo with SASS loop Démo with SASS loop

Dans cette démo, on créé une boucle sur un nombre de cercles déterminé et on fait varier certaines propriétés CSS en fonction de l’index. L’inconvénient est que le nombre de cercles est définit en dur dans le style.

Démo with CSS variables Démo with CSS variables

Il est possible de reproduire le même comportement avec les variables CSS. Le principe est de dynamiser la variable CSS en inline dans la partie templating du HTML.

Avec Javascript Avec Javascript

Les variables CSS peuvent être modifiées en JavaScript.

Cela permet de personnaliser le style d’un élément en fonction d’une action utilisateur ou d’effectuer des animations.

Déclarer une variable CSS en JS Déclarer une variable CSS en JS

window.CSS.registerProperty({
  name: '--primary-secondary',
  syntax: '<color>',
  initialValue: 'blue',
  inherits: false,
});

Manipuler une variable CSS en JS Manipuler une variable CSS en JS

// obtenir une variable à partir d'un style en ligne (dans un élément html)
element.style.getPropertyValue('--ma-variable');

// obtenir une variable par ailleurs
getComputedStyle(element).getPropertyValue('--ma-variable');

// définir une variable dans un style en ligne
element.style.setProperty('--ma-variable', varJS + 4);

Démo Démo

Dans cette démo, on va dynamiser des variables CSS en fonction de la position de la souris

Conclusion Conclusion

Voilà, nous avons fait un tour d’horizon des variables CSS, il y a sûrement d’autres cas d’usage que je n’ai pas abordé. Par exemple, il est possible d’utiliser les containers style queries en fonction de la valeur d’une variable CSS.

Merci pour la lecture 🙂

Liens Liens

https://la-cascade.io/articles/que-peut-on-mettre-dans-une-variable-css