Utiliser les variables CSS

Introduction aux variables

En code, une variable est un espaces de stockage dans lequel on va enregistrer une valeur. Pour utiliser cette donnée dans notre code, on va appeler la variable définie en avance. C'est très pratique pour réutiliser une valeur plusieurs fois.

Bref point vocabulaire avec cette déclaration : div { color: red }
- div est le sélecteur
- color est une propriété
- red est une valeur.

Utilisation

Déclarer une variable

Code:

:root {
 --lightColor: #FFFFFF;
}

C'est dans le sélecteur :root que font être listées les variables. Comme son nom l'indique, il cible la racine de la page donc tout ce qui sera déclaré dedans sera utilisable sur toute la page.
Une variable prend un nom personnalisé précédé de -- et attend une valeur.


Utiliser une variable

Code:

div {
 background: var(--lightColor);
}

Désormais, au lieu d'écrire une valeur brute, on appellera la variable sous cette forme.

C'est aussi simple que cela !

En pratique

Nomenclature
Nommer les variables est un exercice qui peut s'avérer casse-tête. Il existe deux logiques :
- donner un nom descriptif : --white: #FFFFFF
- donner un nom utilitaire : --lightColor: #FFFFFF

Dans le Blank Theme, vous retrouverez plutôt la deuxième logique car les variables sont principalement là pour vous aidez à personnaliser votre forum sans avoir parcourir chaque ligne de code. La modification de la variable --white en #174E0D n'a soudainement plus aucun sens puisqu'elle ne contient plus du blanc mais du vert.


Que définir
Les variables peuvent stocker n'importe quelle valeur de CSS. Ici on a surtout vu des couleurs mais on peut définir des typographiques, des tailles, des bordures, des ombres, ...

En poussant un peu leur utilisable, on peut se créer des petites librairies de valeur.

Exemple:

Code:

:root {
 --darkColor: #000000;
 --colorAccent: #174E0D;

 --small: 12px;
 --medium: 14px;
 --large: 16px;

 --laborFont: 'Arial';
 --titleFont: 'Bebas';

 --boxBorder: var(--small) solid var(--colorAccent);
 --heading1: var(--large) var(--titleFont);
}

Pour en savoir plus, lisez la documentation !