Generador de Variables CSS
Crea propiedades personalizadas CSS (variables) con un editor visual. Genera bloques :root con selectores de color y presets.
Acerca de esta herramienta
Las propiedades personalizadas de CSS (variables CSS) son valores reutilizables que puede definir una vez y usar en todas sus hojas de estilo. En lugar de codificar colores, tamaños u otros valores directamente en su CSS, puede almacenarlos como variables en un bloque :root y hacer referencia a ellos con la sintaxis var(--nombre). Esto facilita el mantenimiento de tokens de diseño coherentes en todo su proyecto y simplifica los cambios de tema global: actualice el valor de la variable y el cambio se aplicará en todos los lugares donde se use.
Con este generador de variables CSS, puede crear y organizar propiedades personalizadas de manera visual sin escribir código manualmente. Agregue variables una por una, elija entre plantillas de tema preestablecidas para modo oscuro, modo claro o colores de marca, y luego especifique el nombre, tipo (color, tamaño, número o cadena) y valor de cada variable. La herramienta formatea automáticamente la salida como un bloque CSS :root válido con comentarios en línea que muestran cómo usar cada variable en sus estilos. Una vez generado, copie el CSS directamente al portapapeles o descárguelo como archivo.
Esta herramienta es especialmente útil para la creación de sistemas de diseño, el mantenimiento de temas de varias marcas o la gestión de escalas de espaciado y tipografía coherentes. Ya sea que esté creando un sitio web pequeño o una biblioteca de componentes grande, tener un conjunto centralizado de variables CSS reduce la duplicación de código y hace que las actualizaciones de diseño sean más rápidas y confiables.
Preguntas Frecuentes
Implementación de Código
# 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.