Que sont les variables CSS et comment les utiliser
Publié: 2022-02-16Lors de l'écriture du code CSS pour votre site, vous pouvez utiliser les propriétés personnalisées CSS (variables) pour accélérer le processus de développement. Vous pouvez utiliser des variables pour définir des propriétés (taille, couleur), qui peuvent ensuite être appliquées à plusieurs éléments.
De cette façon, il est possible d'avoir plus de contrôle sur le code et la conception. La modification de la valeur d'une variable à un endroit remplace la valeur de cette propriété partout où elle est invoquée.
Cet article expliquera comment utiliser les variables CSS et quelques applications pratiques.
Commençons!
Déclarer une variable
Les variables peuvent avoir une portée globale ou locale. Pour définir une variable globalement, vous utilisez le sélecteur :root.
:root { --base-font-size: 1.1rem; } :root { --base-font-size: 1.1rem; }Le sélecteur :root correspond à la racine du document, c'est-à-dire <html> dans notre cas particulier.
Pour déclarer une propriété personnalisée CSS (variable), vous commencez par deux tirets (--). Les variables sont sensibles à la casse, par exemple :
--base-font-size et --Base-Font-Size sont deux variables différentes.
Pour définir une variable localement, vous utilisez le sélecteur de l'élément dans lequel vous souhaitez utiliser la variable.
#first-container { --background: #ccc; } #first-container { --background: #ccc; }Une fois que vous avez défini la variable, il est nécessaire de l'invoquer.
La fonction var()
La fonction var() est utilisée pour insérer la valeur de la variable CSS définie. La fonction se remplace par la valeur de la variable. Prenons un exemple :
Le code HTML
- Copiez et collez ce code dans votre éditeur de code.
- Enregistrez le fichier sous index.html .
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html> 
Le code CSS
- Créez un fichier appelé style.css (dans le même répertoire que index.html ).
- Collez le code ci-dessous et enregistrez le fichier.
/* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
border-radius: 5px; } /* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
border-radius: 5px; } 
Il y a certaines choses à remarquer ici :
- La création d'une palette de couleurs est un processus simple.
- Il est possible d'utiliser une variable à l'intérieur de la définition d'une autre variable, comme la couleur dans la définition des variables de bordure.
- Les variables sont héritées, la propriété color de l'élément .container-* affecte ses enfants directs. Dans ce cas, l'élément <p>.
Pour remplacer une variable, vous la déclarez dans son conteneur, ce qui la rend plus spécifique.
- Modifiez le code CSS :
button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; } button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; } 
Variables et requêtes multimédias
Les variables peuvent également être héritées et remplacées dans les requêtes média CSS.
- Ajoutez ce code aux variables :
:root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; } :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }Nous avons défini une largeur de base pour l'élément wrapper. Nous pouvons maintenant appliquer ces variables à la propriété .wrapper width.
- Ajoutez ce code à la fin du fichier CSS :
.wrapper { width: var(--wrapper-width);
margin: 0 auto; } .wrapper { width: var(--wrapper-width);
margin: 0 auto; } 
Pour définir une requête multimédia pour les appareils avec des écrans de moins de 1 100 pixels de large, nous écrivons la requête multimédia suivante.
- Modifiez le code CSS :
@media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } } @media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } } 
La nouvelle définition de variable dans la requête multimédia remplace sa valeur. Notez également que la variable est disponible dans le DOM, ce qui signifie qu'elle peut être récupérée et manipulée avec JS. Ce n'est pas possible avec des variables dans les préprocesseurs CSS.
Résumé
Les variables sont utiles pour organiser et gérer de petites et grandes quantités de CSS. Ils réduisent les répétitions et évitent ainsi les erreurs. Les variables CSS sont dynamiques, ce qui signifie qu'elles peuvent être modifiées lors de l'exécution. Il est facile de thématiser dynamiquement un site ou une application avec des variables CSS. Ils offrent la possibilité d'attribuer des valeurs à une propriété CSS avec un nom personnalisé. Les variables suivent les règles de cascade standard, il est donc possible de définir la même propriété à différents niveaux de spécificité.
J'espère que ce tutoriel vous a plu. Merci d'avoir lu!