2.1 Déclaration des variables CSS
Les variables CSS, aussi connues sous le nom de Custom Properties, permettent de définir des valeurs réutilisables dans différentes parties du code CSS. Elles simplifient considérablement la gestion des styles et augmentent leur flexibilité.
Les variables CSS sont déclarées avec un double tiret (--) et peuvent être définies dans n'importe quel sélecteur. Cependant,
pour assurer la disponibilité des variables dans tout le document, elles sont souvent définies dans le sélecteur racine :root.
Syntaxe :
sélecteur {
--nom-variable: valeur;
}
Exemple :
Dans cet exemple, quatre variables sont déclarées : --main-bg-color, --main-text-color, --primary-color, et --font-size.
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
Utilisation des variables CSS
Pour utiliser la valeur d'une variable, on utilise la fonction var(), qui prend le nom de la variable en tant qu'argument.
Syntaxe :
sélecteur {
propriété: var(--nom-variable);
}
Exemple :
Dans cet exemple, les valeurs des variables sont utilisées pour définir la couleur de fond, la couleur du texte, la taille de la police et la couleur des liens.
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
2.2 Exemples d'utilisation des variables CSS
Exemple 1 : Utilisation basique des variables
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
--font-size: 16px;
}
body {
background-color: var(--main-bg-color);
color: var(--main-text-color);
font-size: var(--font-size);
}
a {
color: var(--primary-color);
}
<body>
<p>Ceci est un paragraphe avec un lien vers <a href="#">Example.com</a>.</p>
</body>
Résultat :
- Le fond de la page sera gris clair
- Le texte sera gris foncé
- La taille de la police sera de 16 pixels
- Les liens seront de couleur bleue
Exemple 2 : Redéfinition des variables dans des composants spécifiques
Les variables CSS peuvent être redéfinies pour des éléments ou composants spécifiques, offrant ainsi une flexibilité dans le style :
:root {
--main-bg-color: #f0f0f0;
--main-text-color: #333;
--primary-color: #3498db;
}
.header {
background-color: var(--primary-color);
color: var(--main-bg-color);
}
.footer {
--primary-color: #e74c3c; /* Redéfinition de la variable */
background-color: var(--primary-color);
color: var(--main-bg-color);
}
<div class="header">
<p>Ceci est le header.</p>
</div>
<div class="footer">
<p>Ceci est le footer.</p>
</div>
Résultat :
- Le fond de l'en-tête sera bleu, et le texte sera gris clair
- Le fond du pied de page sera rouge (variable redéfinie), et le texte sera gris clair
Exemple 3 : Utilisation des variables en combinaison avec d'autres valeurs
Les variables CSS peuvent être combinées avec d'autres valeurs et fonctions CSS :
:root {
--padding: 10px;
--margin: 20px;
}
.container {
padding: var(--padding);
margin: var(--margin) auto;
border: 1px solid black;
}
<div class="container">
<p>Ceci est un container avec padding et margin.</p>
</div>
Résultat :
- Le container aura des paddings et marges définis par les variables
2.3 Utilisation des variables CSS en JavaScript
Exemple d'utilisation des variables CSS en JavaScript
Les variables CSS peuvent être modifiées dynamiquement avec JavaScript, ce qui permet d'adapter les styles en temps réel :
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
<button id="toggle-theme">Toggle Theme</button>
<p>Ceci est un paragraphe.</p>
document.getElementById('toggle-theme').addEventListener('click', () => {
const root = document.documentElement;
if (root.style.getPropertyValue('--bg-color') === '#ffffff') {
root.style.setProperty('--bg-color', '#333333');
root.style.setProperty('--text-color', '#ffffff');
} else {
root.style.setProperty('--bg-color', '#ffffff');
root.style.setProperty('--text-color', '#000000');
}
});
Explication :
En cliquant sur le bouton, les valeurs des variables --bg-color et --text-color sont modifiées, ce qui change la couleur de fond et de texte sur la page.
GO TO FULL VERSION