Des couleurs à accorder, un dégradé ou une grille CSS à écrire, une maquette de post à montrer : ces outils rendent un résultat prêt à copier ou à télécharger, sans compte et sans logiciel.
Générez un bloc :root {} avec vos custom properties
Les variables CSS, ou propriétés personnalisées, remplacent les valeurs répétées d'une feuille de style par un nom déclaré une fois. Changer une couleur de marque devient une modification en un endroit, et un thème sombre se réduit à redéclarer quelques variables. Cet outil assemble un bloc de déclaration à partir de vos noms et valeurs, prêt à coller en tête de feuille. Contrairement aux variables d'un préprocesseur, celles-ci existent dans le navigateur : elles se lisent et se changent en JavaScript, et elles se redéfinissent pour une partie du document seulement.
:root {}
:root {
--color-primary: #6366f1;
--color-secondary: #8b5cf6;
--font-size-base: 1rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--radius: 0.75rem;
}Celles d'un préprocesseur disparaissent à la compilation : le CSS livré contient les valeurs finales. Les propriétés personnalisées, elles, vivent dans le navigateur, se lisent en JavaScript et se redéfinissent à l'exécution. C'est ce qui rend un changement de thème instantané et sans rechargement.
Sur le sélecteur racine pour celles qui valent partout. Une variable redéclarée sur un conteneur ne s'applique qu'à lui et à ses descendants, ce qui permet un bloc à thème inversé sans toucher au reste. C'est le mécanisme des thèmes clair et sombre.
La déclaration est ignorée, ce qui peut vider une propriété entière. La fonction de lecture accepte une valeur de repli en second argument, et il vaut mieux en mettre une systématiquement sur les variables susceptibles d'être absentes.
Un résultat qui vous paraît faux, une valeur périmée, un cas qui manque ? Signalez-le à contact@topapps.fr