Les Variables en CSS

Dans la Science Informatique, on appelle variable une donnée à laquelle on attribue une valeur. Sa valeur peut être modifiée sans changer le nom. Dans la programmation, dans le développement web dans notre cas ici, la variable se présente sous de nombreuses formes définies par le développeur ou programmeur.

Pour pouvoir mieux comprendre ce que nous avons expliqué ci-haut, faisons un pas en arrière et parlons des variables en mathématiques.

Par exemple :
x = 1, dans ce cas précis, x est la variable et 1 est sa valeur. Ce qui signifie que si on faisait x + 3, cela sera égal à 4, parce que nous avons attribué la valeur de 4 à notre variable. Quelqu’un d’autre peut lui attribuer la valeur de 256 ou autre chose (Computerhope, 2022).

Maintenant que nous avons une idée de ce qu'est une variable, voyons ce qu'est une variable en CSS.

CSS (Cascading Style Sheet) est un langage de codage que nous utilisons pour styler ou donner une bonne apparence et mise en page à notre page web. Sans CSS, la page web est simplement du texte sur un fond blanc (BIGCOMMERCE, nd).

On appelle variables en CSS les propriétés personnalisées définies par le développeur qui contiennent des valeurs spécifiques à réutiliser dans un document CSS.

Selon le W3School, « Une bonne façon d'utiliser les variables CSS est lorsque vous utilisez les couleurs de votre design. Au lieu de copier et coller les mêmes couleurs encore et encore, vous pouvez les placer dans des variables ».

En CSS, nous avons deux types de variables : les variables locales et globales.

Pour créer une variable globale, déclarez-la à l'intérieur du sélecteur :root. Le nom de la variable commence par deux tirets (--) suivis du nom donné par le développeur, qui peut être une combinaison de lettres, chiffres ou autres caractères spéciaux tels que le trait d'union (-) ou le trait de soulignement (_) (MDN, webdocs).

Par example:

:root {
  --couleur-fond-principale: brown;
  --couleur-texte-principale: white;
}

body {
  background-color: var(--couleur-fond-principale);
  color: var(--couleur-texte-principale);
}

.container {
  --couleur-fond-principale: blue;
  background-color: var(--couleur-fond-principale);
}

Dans cet exemple ci-haut, nous avons defini deux propriétés personnalisées à l'aide de la pseudo-classe :root. La première propriété est --couleur-fond-principale, qui est définie sur brown. La deuxième propriété est --couleur-texte-principale, qui est définie sur blanc. Nous utilisons ensuite ces propriétés dans le sélecteur de corps pour définir la couleur d'arrière-plan et la couleur du texte de la page.

Nous définissons également une propriété locale personnalisée appelée --couleur-fond-principale dans le sélecteur .container. Cette propriété est définie sur blue, ce qui remplace la valeur globale de --couleur-fond-principale. Nous utilisons ensuite cette propriété pour définir la couleur d'arrière-plan de l'élément .container.

Références

BigCommerce: [https://www.bigcommerce.com/ecommerce-answers/what-css-and-why-it-important/]
ComputerHope : [https://www.computerhope.com/jargon/v/variable.htm]
MDN: [https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties]
W3School : [https://www.w3schools.com/css/css3_variables.asp]