Les variables CSS

Coucou

Ce tutoriel se base sur un premier jet qui avait été réalisé par Ayfoth.

Ici, nous allons parler des variables CSS.


Quand on code la CSS de son site, forum, ou même d'une page web toute simple, il nous arrive que certains éléments aient les mêmes propriétés. Par exemple, plusieurs blocs peuvent avoir la même couleur de fond, ou encore la même couleur de texte. En général, on écrit ces attributs pour chaque bloc, et, le jour où on veut changer une couleur, il faut la modifier partout où se trouve l'ancienne.

Avec les variables CSS, finis cette galère ! Tu définis ces valeurs à un endroit, puis tu les appelles là où tu le veux. Si tu désires les changer, tu as juste à changer les valeurs des variables et ça se mettra à jour partout.


Oui je sais… la théorie ce n'est pas toujours évident. Du coup, faisons un exemple.

Imaginons que j'ai ce rendu :
(oui oui c'est très très simple :p)

Comme tu le vois, il y a des choses communes. Par exemple :
- la couleur du titre du bloc, de la bordure de ceux-ci et la couleur des liens au survol ;
- la typo des titres ;
- la couleur du titre de la page et des liens.


Voici le code que tu as en général :

CSS:

HTML:

CSS:

HTML:

Comme tu le vois ici, j'ai défini au début de ma CSS une liste de variable que j'ai rattaché à :root qui est la racine de ma page. Ensuite, j'ai utilisé ces variables là où j'en avais besoin en utilisant var(--mavariable).


Pour utiliser les variables, il faudra les déclarer / définir dans le

Code:

:root{

}

Chaque variable devra être écrite de la façon suivante :

Code:

--nom: valeur ;

Par exemple, voici ce que nous avons dans notre CSS actuelle :

Code:

--font2: 'Pacifico', cursive;
  --bkgbann1: url('https://pvereecken.fr/tambouille/design-base/bkg-bann.png');
  --color1: #444;
  --colortransp1: rgba(70,48,23,0.4);

Ce qui donnera par exemple au final

Code:

:root{
  --font1: 'Bitter', serif;
  --font2: 'Pacifico', cursive;
  --bkgbann1: url('https://pvereecken.fr/tambouille/design-base/bkg-bann.png');
  --bkgbann2: url("https://pvereecken.fr/tambouille/design-base/60-lines.png");
  --deco-titre: url("https://pvereecken.fr/tambouille/design-base/deco-titre.png");
  --deco-cate1: url("https://pvereecken.fr/tambouille/design-base/deco-cate1.png");
  --deco-cate2: url("https://pvereecken.fr/tambouille/design-base/deco-cate2.png");
  --deco-cate3: url("https://pvereecken.fr/tambouille/design-base/deco-cate3.png");
  --color1: #444;
  --color2: #d5a066;
  --color3: #463017;
  --color4: #a7936c;
  --color5: #fdc689;
  --color6: #96550B;
  --color7: #ff0006;
  --color8: #000;
  --colortransp1: rgba(70,48,23,0.4);
  --colortransp2: rgba(70,48,23,0.6);
  --colortransp3: rgba(70,48,23,0.8);
  --colortransp4: rgba(70,48,23,0.8);
  --colortrans5: rgba(184, 198, 203, 0.2);
  --bkgcolortransp1: rgba(70,48,23,0.08);
  --colorgpadmin: #A232C7;
  --colorgpstaff: #1BA824;
  --colorgpeleve: #5AAAC7;
}

Ensuite pour les utiliser, il suffira d'indiquer

Code:

var(--nom)

a la place de la valeur de la propriété CSS.

Si on reprend l'exemple de la Tambouille :

Code:

.headerbar{
  background: var(--color3) var(--bkgbann2) repeat;
  border-bottom: 2px solid var(--color3);
  height: 250px;
  margin-top: 40px; /* Hauteur de la barre de nav */
}

Les noms de variables ne doivent pas contenir d'espace, d'accents ou de caractère spéciaux. Tu peux néanmoins utiliser des tirets (-) et underscore (_) sans problème.

Le gros avantages des variables CSS, c'est qu'avec seulement quelques modifications, tu peux totalement changer le visuel d'une page web. Eh oui ! Finis la galère de "rolala j'espère que je n'ai pas oublié de changer la couleur à un endroit" par exemple :p


Ici, je me suis contentée de vous présenter les variables le plus simplement possible. Cela dit, on peut pousser leur utilisation en s'en servant pour définir des valeurs en fonction des supports ou résolutions d'écran (responsable), on peut modifier les valeurs des variables en JavaScript (idéal si tu veux mettre en place un sélecteur de thème par exemple)...

Il existe aussi ce qu'on appelle des pré-processeurs comme SASS qui poussent cette utilisation encore plus loin en permettant d'utiliser des fonctions :p Mais je pense que j'aurai perdu trop de monde si j'avais commencé à en parler ici :p

Je sais que c'est une notion peut-être un peu complexe, du coup, n'hésite pas à te manifester à la suite du message si ce n'est pas clair. Cela dit, même si si semble compliqué ça ne l'est pas vraiment, et une fois que tu as bien compris comment fonctionnent les variables, tu n'arriveras plus à t'en passer :p