Generador de Variables CSS (Design Tokens)
Genera el bloque :root con todas tus variables CSS para un design system limpio y mantenible.
:root {
--color-primary: #3B82F6;
--color-text: #0F172A;
--color-bg: #FFFFFF;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 32px;
--radius-md: 12px;
--font-body: "Inter", system-ui, sans-serif;
}¿Tu equipo necesita un design system?
OCC organiza tu stack de frontend y design system en una plataforma
Descubre OCC →¿Necesitas algo más que esta herramienta? OCC te lo monta
No vendemos software de terceros: somos el equipo que ejecuta. Escríbenos por WhatsApp y te conectamos con el especialista o construimos lo que necesites.
Conectamos con diseñadores verificados para identidad visual, branding, web y assets para redes.
Te montamos un design system completo en Figma con tokens, componentes y guía de marca.
¿Qué son las variables CSS (custom properties)?
Las variables CSS, oficialmente llamadas custom properties, son una forma de definir valores reutilizables que se pueden usar en cualquier parte de tu hoja de estilos. Se declaran dentro de un selector (típicamente :root para que sean globales) con el prefijo -- y se usan con la función var(). Por ejemplo: --color-primary: #3B82F6; y luego background: var(--color-primary);. Son la base de cualquier design system moderno: te permiten cambiar un valor en un solo lugar y propagarlo a toda la aplicación. Nuestra calculadora de variables CSS online te ayuda a generar el bloque :root con todos tus design tokens organizados.
Categorías típicas de design tokens
Colores: --color-primary, --color-secondary, --color-text, --color-bg, --color-error, --color-success.
Espaciado: --spacing-xs (4px), --spacing-sm (8px), --spacing-md (16px), --spacing-lg (32px), --spacing-xl (64px). Escalas geométricas son comunes.
Tipografía: --font-body, --font-display, --font-mono. Tamaños: --text-sm (14px), --text-base (16px), --text-lg (18px), --text-xl (24px), etc.
Radios: --radius-sm (4px), --radius-md (8px), --radius-lg (16px), --radius-full (9999px).
Sombras: --shadow-sm, --shadow-md, --shadow-lg. Cada una con valores complejos de box-shadow.
Animaciones: --transition-fast (150ms), --transition-normal (300ms), --easing-default (cubic-bezier(0.4, 0, 0.2, 1)).
Breakpoints: aunque las custom properties no funcionan en media queries hasta CSS5, los breakpoints se documentan: --bp-sm, --bp-md, --bp-lg.
Ventajas de las variables CSS sobre Sass/Less
1. Tiempo de ejecución: las variables CSS se evalúan en el navegador, no en el build. Puedes cambiarlas con JavaScript dinámicamente.
2. Temas dinámicos: dark mode, light mode, accesibilidad. Solo cambias el valor de las variables; toda la app se actualiza al instante.
3. Herencia natural: las variables se heredan por cascada CSS. Definir :root permite override por contexto (ej. tema oscuro en un div específico).
4. Sin compilación: Sass requiere build. CSS variables funcionan en cualquier archivo .css sin herramientas extra.
5. Soporte universal: todos los navegadores modernos desde 2017. Solo IE11 no las soporta (irrelevante en 2026).
Ejemplo de dark mode con variables
Definiendo dos sets de variables para temas:
:root { --bg: white; --text: black; }
[data-theme="dark"] { --bg: #0F172A; --text: #F1F5F9; }
Luego en componentes: body { background: var(--bg); color: var(--text); }
Cambiar el atributo data-theme con JavaScript propaga el cambio a toda la aplicación sin tocar nada más.
Convenciones de nombres
No hay regla oficial, pero las convenciones comunes son:
kebab-case: --color-primary, no --colorPrimary ni --color_primary.
Jerárquico: categoría-subcategoría-modificador. --color-text-secondary, --spacing-button-lg.
Tailwind style: escalas numéricas. --blue-50, --blue-100... --blue-900. Funciona muy bien para paletas extensas.
Material Design tokens: --md-sys-color-primary, --md-sys-typescale-display-large. Más verbose pero claro.
Preguntas frecuentes
¿Puedo usar variables CSS en media queries?
No directamente en la declaración de breakpoints, pero sí dentro del bloque. @media (min-width: 768px) { --spacing-md: 24px; } sí funciona y es muy útil para tipografía responsiva.
¿Las variables CSS son compatibles con frameworks?
Sí, con todos: React, Vue, Svelte, Angular. De hecho, Tailwind v4 (2026) las usa nativamente. Material UI, Chakra y otros componentes UI las aceptan también.
¿Sass tiene futuro?
Sí, aún es muy útil para funciones, mixins, loops, importación de archivos. Pero para tokens de diseño, las variables CSS son superiores. Combinarlos es la práctica moderna.
¿Cómo cambio una variable con JavaScript?document.documentElement.style.setProperty('--color-primary', '#FF0000'). Esto cambia la variable a nivel root y se propaga a todo el DOM.
¿Mis datos se almacenan?
No. La generación se ejecuta en tu navegador. Ningún token introducido se transmite a servidores externos.
Herramientas relacionadas: Colores HEX/RGB/HSL/CMYK, Flexbox CSS.
Revisado por Javier Andreo