Generador de variables CSS (Custom Properties)

¿Qué son las CSS Custom Properties?

Las CSS Custom Properties (variables CSS) son propiedades definidas por el desarrollador que se pueden reutilizar en todo el CSS. Se definen con --nombre: valor y se usan con var(--nombre).

Ventajas de usar variables CSS

• Mantenibilidad: cambiar un color en :root actualiza toda la web.
• Temas: implementa modo oscuro sobreescribiendo las variables en [data-theme="dark"].
• JavaScript: puedes leer y modificar variables CSS desde JS.
• Cascada: las variables CSS respetan la cascada y herencia de CSS.

Ejemplo básico

:root {
  --color-primary: #152bca;
  --font-size-base: 1rem;
  --spacing-md: 1rem;
}

.button {
  background: var(--color-primary);
  font-size: var(--font-size-base);
  padding: var(--spacing-md);
}