DEV Community

Emmanuelbinen for KADEA ACADEMY

Posted on • Edited on

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);
}
Enter fullscreen mode Exit fullscreen mode

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]

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Retry later