aowlyne
Les Variables CSSmenu_book
Les variables permettent de déterminer des valeurs CSS réutilisables et facilement modifiables. Elles te permettront de gagner du temps lors de tes personnalisations et changements de design.

seuls les admins d'un forum peuvent modifier la feuille de style CSS

Déclaration des variables
On déclare les variables CSS tout en haut de la feuille de style en cascade dans un root.
Il est également possible de réassigner plusieurs fois la valeur d'une variable dans son css si besoin.
Le nom de la variable doit obligatoirement commencer par --, les espaces et les majuscules ne sont pas autorisés, pour séparer les mots et simplifier la lisibilité, tu peux utiliser des - ou des _.

exemple :

Code:

:root {
  --main-color: #000000;
  --font_title: 'Josefin Sans', sans-serif;
  --br: 8px;
}



Utilisations des variables
L'utilisation est très simple, il suffit d'assigner ta variable à la place de la valeur.

exemple :

Code:

.myClass {
   font-family: var(--font_title);
   color: var(--main-color);
   border-radius: var(--br);
}


Quel gain de temps pour vos forums ?
L'avantage des variables CSS c'est qu'elles sont réutilisables à l'infini.

Lors de la personnalisation de ton forum, tu utilise souvent les mêmes couleurs à plusieurs endroits par exemple #000000 (noir). Et lorsque tu change de design, tu dois retrouver toutes les lignes ou tu utilise #000000 pour mettre ta nouvelle  couleur #c1c1c1.
C'est parfois très long et le risque d'oublier une ligne est grand. En utilisant la variable --color le jour où tu veux changer la couleur, tu change uniquement la valeur assignée à --color dans ton root et tous les endroits où tu l'a utilisé prendront ta nouvelle couleur automatiquement. Tu n'a donc plus qu'un changement à faire. C'est super pratique pour faire des test quand tu n'es pas certain de la bonne couleur à mettre à plusieurs endroit.

Ça fonctionne avec n'importe quelle valeur css, couleur, police ou taille de texte, border-radius ...