10.1 Déclaration des variables
Les variables en CSS, également appelées propriétés personnalisées (CSS Custom Properties), permettent aux développeurs de conserver les valeurs des propriétés en un seul endroit et de les réutiliser dans le document. Cela rend le CSS plus flexible et gérable, surtout lorsqu'on travaille sur des projets de grande envergure.
Déclaration des variables
Les variables en CSS sont déclarées en utilisant deux tirets (--) devant le nom de la variable. Elles sont généralement déclarées à l'intérieur du sélecteur :root pour être accessibles dans tout le document.
Syntaxe :
:root {
--nom-variable: valeur;
--nom-variable: valeur;
}
Exemple :
Dans cet exemple, trois variables sont déclarées : --main-color, --secondary-color, et --font-size.
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
10.2 Utilisation des variables
Pour utiliser les variables, on utilise la fonction var(), qui prend le nom de la variable comme argument.
Syntaxe :
sélecteur {
propriété: var(--nom-variable);
propriété: var(--nom-variable);
}
Exemple :
Cet exemple utilise les variables déclarées précédemment pour styliser l'arrière-plan, la couleur du texte et la taille de police de l'élément <body>.
body {
background-color: var(--main-color);
color: var(--secondary-color);
font-size: var(--font-size);
}
10.3 Héritage et redéfinition des variables
Les variables CSS sont héritées selon la hiérarchie des éléments. Cela signifie que si une variable est déclarée dans un élément, elle sera disponible pour ses éléments enfants. Les variables peuvent également être redéfinies à l'intérieur d'autres sélecteurs.
Exemple :
Dans cet exemple, l'élément .header redéfinit la variable --main-color, et cette nouvelle variable est appliquée uniquement à lui. En même temps, l'élément .footer utilise la valeur de la variable, déclarée dans :root.
<div class="header">Header</div>
<div class="footer">Footer</div>
:root {
--main-color: #3498db;
}
.header {
--main-color: #e74c3c;
background-color: var(--main-color);
}
.footer {
background-color: var(--main-color);
}
10.4 Avantages de l'utilisation des variables CSS
1. Simplification de la gestion des styles :
Les variables permettent de modifier la valeur d'une propriété en un seul endroit, et ce changement est automatiquement appliqué à tous les endroits où cette variable est utilisée. Cela est particulièrement utile pour la thématisation et le maintien d'un style cohérent.
2. Amélioration de la lisibilité et de la maintenance du code :
L'utilisation des variables rend le code CSS plus lisible et compréhensible, car elles peuvent être utilisées pour décrire des valeurs, telles que des couleurs et des tailles, qui peuvent avoir une signification sémantique (par exemple, --main-color au lieu de #3498db).
3. Mise à jour dynamique des styles :
Les variables peuvent être modifiées dynamiquement à l'aide de JavaScript, ce qui permet de créer des interfaces utilisateur plus interactives et dynamiques.
GO TO FULL VERSION