Idea Les Râleuses sont absentes.. Idea
Le forum est en vacances mais toutes nos ressources restent disponibles. (En savoir +)
Le Deal du moment : -75%
Plaque Induction Portable Amzchef
Voir le deal
42.49 €

Aller en bas
Miettes
Miettes
Râleuse (Admin)
Informations :
► En ligne de 9h à 18h en semaine
Peu présente le reste du temps
----
Idea Viens papoter avec nous sur le discord
Pseudo Discord : Miettes
Messages : 2159

Les variables CSS Empty Les variables CSS

le Mer 19 Fév 2020 - 17:40

CSS

Les variables CSS

Coucou Smile

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

Ici, nous allons parler des variables CSS.

De quoi s'agit-il ?

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.

Ok… j'ai rien compris

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

Imaginons que j'ai ce rendu :
Les variables CSS Exp-va10
(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.

Sans les variables

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

Code:
*{
  box-sizing: border-box;
}

body{
  color: #444;
  font: normal 14px/1 'Montserrat', sans-serif;
  margin: auto;
  width: 600px;
}

h1{
  color: #e26e26;
  border-bottom: 2px solid #e26e26;
  font-size: 22px;
  font-family: 'Sigmar One', cursive;
}

a{
  color: #e26e26;
  font-weight: bold;
  text-decoration: none;
}

a:hover{
  color: #5d2b08;
  text-decoration: underline;
}

.d-flex{
  align-items:  stretch;  
  display:  flex;
  justify-content:  space-between;  
}

.d-flex > div{
  background: #bebebe;
  border: #5d2b08 4px solid;
  border-bottom: 0;
  border-top: 0;
  border-radius: 10px;
  flex: 0 0 49.5%;
  padding: 10px;
  position: relative;

}

.d-flex > div h2{
  color: #5d2b08;
  font-size: 18px;
  font-family: 'Sigmar One', cursive;
  left: 10px;
  position: absolute;
  top: -25px;
}

HTML:

Code:
<div class="d-flex">  
  <div>
    <h2>Mon titre</h2>
    <p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit. Aliquam excepturi maiores commodi dolore, ex, ducimus explicabo enim pariatur facilis, impedit tempore maxime eveniet tempora laboriosam laborum quasi id obcaecati consectetur.</p>
  </div>

  <div>
    <h2>Mon titre</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam excepturi maiores commodi dolore, ex, ducimus explicabo enim pariatur facilis, impedit tempore maxime eveniet tempora laboriosam laborum quasi id obcaecati consectetur.</p>
  </div>
</div>

Avec les variables

CSS:

Code:
:root{
  --typo1: 'Montserrat', sans-serif;
  --typo2: 'Sigmar One', cursive;
  --couleur1: #e26e26;
  --couleur2: #5d2b08;
}

*{
  box-sizing: border-box;
}

body{
  color: #444;
  font: normal 14px/1 var(--typo1);
  margin: auto;
  width: 600px;
}

h1{
  color: var(--couleur1);
  border-bottom: 2px solid var(--couleur1);
  font-size: 22px;
  font-family: var(--typo2);
}

a{
  color: var(--couleur1);
  font-weight: bold;
  text-decoration: none;
}

a:hover{
  color: var(--couleur2);
  text-decoration: underline;
}

.d-flex{
  align-items:  stretch;  
  display:  flex;
  justify-content:  space-between;  
}

.d-flex > div{
  background: #bebebe;
  border: var(--couleur2) 4px solid;
  border-bottom: 0;
  border-top: 0;
  border-radius: 10px;
  flex: 0 0 49.5%;
  padding: 10px;
  position: relative;

}

.d-flex > div h2{
  color: var(--couleur2);
  font-size: 18px;
  font-family: var(--typo2);
  left: 10px;
  position: absolute;
  top: -25px;
}

HTML:

Code:
<div class="d-flex">  
  <div>
    <h2>Mon titre</h2>
    <p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit. Aliquam excepturi maiores commodi dolore, ex, ducimus explicabo enim pariatur facilis, impedit tempore maxime eveniet tempora laboriosam laborum quasi id obcaecati consectetur.</p>
  </div>

  <div>
    <h2>Mon titre</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam excepturi maiores commodi dolore, ex, ducimus explicabo enim pariatur facilis, impedit tempore maxime eveniet tempora laboriosam laborum quasi id obcaecati consectetur.</p>
  </div>
</div>

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 résumer

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 */
}

Exclamation 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.

Idea 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

A noter

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



_________________
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Post-It des Râleuses