Recopier la même teinte de bleu dans cinquante règles CSS, puis devoir la changer partout le jour où la charte évolue : c’est exactement ce que les variables CSS permettent d’éviter. Déclarées avec la syntaxe --nom-de-variable: valeur; sur un sélecteur (souvent :root pour une portée globale), elles se réutilisent ensuite avec var(--nom-de-variable), et peuvent même être redéfinies localement pour une portion précise de la page.
Fonctionnement dans WordPress
Depuis l’introduction de theme.json, WordPress génère automatiquement des variables CSS pour chaque couleur, taille de police, espacement ou dégradé déclaré dans les préréglages, avec un nommage prévisible comme --wp--preset--color--vivid-cyan-blue. Ces variables sont injectées dans les styles globaux du site et réutilisées par les blocs et par tout CSS personnalisé, ce qui permet de changer un préréglage à un seul endroit et de voir la mise à jour se propager partout.
Exemple
:root {
--couleur-accent: #2563eb;
}
.wp-block-button__link {
background-color: var(--couleur-accent);
background-color: var(--wp--preset--color--vivid-cyan-blue, var(--couleur-accent));
}Bon à savoir
- Contrairement aux variables Sass, une variable CSS existe réellement dans le navigateur : elle est inspectable dans les outils de développement et peut être modifiée en JavaScript à l’exécution.
- La fonction
var()accepte une valeur de repli en second argument, utile quand une variable de préréglage pourrait ne pas être définie. - Les variables CSS suivent les règles normales de la cascade et de l’héritage : une variable redéfinie dans un bloc parent s’applique à tous ses enfants, sauf surcharge locale.