CSS Variablen Generator
Erstellt CSS benutzerdefinierte Eigenschaften (Variablen) mit einem visuellen Editor. Generiert :root-Blöcke mit Farbauswählern und Voreinstellungen.
Über dieses Tool
CSS-benutzerdefinierte Eigenschaften (CSS-Variablen) sind wiederverwendbare Werte, die Sie einmal definieren und überall in Ihren Stylesheets verwenden können. Anstatt Farben, Größen oder andere Werte direkt in Ihrem CSS zu hartcodieren, können Sie diese als Variablen in einem :root-Block speichern und mit der Syntax var(--name) referenzieren. Dies macht es einfach, konsistente Design-Token im gesamten Projekt zu verwalten und vereinfacht globale Design-Änderungen—aktualisieren Sie einfach den Variablenwert und die Änderung gilt überall dort, wo er verwendet wird.
Mit diesem CSS-Variablengenerator können Sie benutzerdefinierte Eigenschaften visuell erstellen und organisieren, ohne Code manuell zu schreiben. Fügen Sie Variablen nacheinander hinzu, wählen Sie aus vordefinierten Design-Vorlagen für dunklen Modus, hellen Modus oder Markenfarben, und geben Sie dann Namen, Typ (Farbe, Größe, Zahl oder Zeichenkette) und Wert für jede Variable an. Das Tool formatiert die Ausgabe automatisch als einen gültigen :root-CSS-Block mit Inline-Kommentaren, die zeigen, wie jede Variable in Ihren Stilen verwendet wird. Nach der Erstellung können Sie das CSS direkt in die Zwischenablage kopieren oder als Datei herunterladen.
Dieses Tool ist besonders nützlich für die Erstellung von Design-Systemen, die Verwaltung von Multi-Brand-Themes oder die Verwaltung konsistenter Abstands- und Typografie-Skalen. Egal ob Sie eine kleine Website oder eine große Komponentenbibliothek erstellen, ein zentralisierter Satz von CSS-Variablen reduziert Code-Duplizierung und macht Design-Updates schneller und zuverlässiger.
Häufig gestellte Fragen
Code-Implementierung
# 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.