Générateur de Variables CSS
Créez des propriétés personnalisées CSS (variables) avec un éditeur visuel. Générez des blocs :root avec des sélecteurs de couleur et des préréglages.
À propos de cet outil
Les propriétés personnalisées CSS (variables CSS) sont des valeurs réutilisables que vous pouvez définir une fois et utiliser dans toutes vos feuilles de style. Au lieu de coder en dur les couleurs, les tailles ou d'autres valeurs directement dans votre CSS, vous pouvez les stocker en tant que variables dans un bloc :root et les référencer avec la syntaxe var(--nom). Cela facilite le maintien de jetons de conception cohérents dans tout votre projet et simplifie les changements de thème global—il suffit de mettre à jour la valeur de la variable et le changement s'applique partout où elle est utilisée.
À l'aide de ce générateur de variables CSS, vous pouvez créer et organiser visuellement les propriétés personnalisées sans écrire le code manuellement. Ajoutez les variables une à une, choisissez parmi les modèles de thème prédéfinis pour le mode sombre, le mode clair ou les couleurs de marque, puis spécifiez le nom, le type (couleur, taille, nombre ou chaîne) et la valeur de chaque variable. L'outil formate automatiquement la sortie en tant que bloc CSS :root valide avec des commentaires en ligne montrant comment utiliser chaque variable dans vos styles. Une fois généré, copiez le CSS directement dans votre presse-papiers ou téléchargez-le en tant que fichier.
Cet outil est particulièrement utile pour la création de systèmes de conception, l'entretien de thèmes multi-marques ou la gestion d'échelles cohérentes d'espacement et de typographie. Que vous créiez un petit site web ou une grande bibliothèque de composants, disposer d'un ensemble centralisé de variables CSS réduit la duplication de code et rend les mises à jour de conception plus rapides et plus fiables.
Questions Fréquentes
Implémentation du Code
# Generate CSS :root block from a dictionary of variables
def generate_css_variables(variables: dict) -> str:
lines = [":root {"]
for name, value in variables.items():
var_name = name if name.startswith("--") else f"--{name}"
lines.append(f" {var_name}: {value};")
lines.append("}")
return "\n".join(lines)
# Example: dark mode theme
dark_theme = {
"--bg-primary": "#0f0f0f",
"--bg-secondary": "#1a1a1a",
"--text-primary": "#ffffff",
"--text-secondary": "#a0a0a0",
"--accent": "#6366f1",
"--border-radius": "8px",
"--font-size-base": "16px",
}
print(generate_css_variables(dark_theme))Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.