Generatore di Variabili CSS
Crea proprietà personalizzate CSS (variabili) con un editor visivo. Genera blocchi :root con selettori di colore e predefiniti.
Informazioni sullo strumento
Le proprietà personalizzate CSS (variabili CSS) sono valori riutilizzabili che puoi definire una sola volta e utilizzare in tutti i tuoi fogli di stile. Anziché codificare direttamente i colori, le dimensioni o altri valori nel tuo CSS, puoi archiviarli come variabili in un blocco :root e farvi riferimento con la sintassi var(--nome). Questo facilita il mantenimento di token di design coerenti in tutto il progetto e semplifica i cambiamenti di tema globali—basta aggiornare il valore della variabile e il cambiamento si applica ovunque venga utilizzato.
Con questo generatore di variabili CSS, puoi creare e organizzare visivamente le proprietà personalizzate senza scrivere il codice manualmente. Aggiungi variabili una alla volta, scegli tra i modelli di tema preimpostati per la modalità scura, la modalità chiara o i colori del marchio, quindi specifica il nome, il tipo (colore, dimensione, numero o stringa) e il valore per ogni variabile. Lo strumento formatta automaticamente l'output come un blocco CSS :root valido con commenti inline che mostrano come utilizzare ogni variabile nei tuoi stili. Una volta generato, copia il CSS direttamente negli appunti o scaricalo come file.
Questo strumento è particolarmente utile per la creazione di sistemi di design, la gestione di temi multi-brand o la gestione di scale coerenti di spaziatura e tipografia. Che tu stia creando un sito piccolo o una grande libreria di componenti, avere un set centralizzato di variabili CSS riduce la duplicazione del codice e rende gli aggiornamenti del design più veloci e affidabili.
Domande Frequenti
Implementazione del Codice
# 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.