Online Tool Store
Extractor de Variables CSS
Pega CSS y extrae cada variable: redefiniciones en conflicto, variables sin usar o indefinidas detectadas. Exporta como :root, JSON o lista var().
🔒 Esta herramienta funciona totalmente en tu navegador. Tus archivos nunca se suben a un servidor.
Herramienta de navegador
Extractor de Variables CSS
Cómo funciona
- Empieza con el ejemplo ya cargado o pega tu propio CSS.
- Revisa el resumen — cada variable encontrada, cualquier redefinición con valores en conflicto y las variables sin usar o indefinidas.
- Consulta la tabla completa con el selector, el valor y el tipo inferido (color, longitud, fuente, etc.) de cada variable.
- Elige un formato de exportación — un bloque :root limpio, JSON o una lista var() — y cópialo o descárgalo.
FAQ
¿Esto funciona en mi navegador?
Sí. Tu CSS se procesa localmente en la página — no se sube nada y no hay cuenta.
¿Qué cuenta como variable redefinida?
Una propiedad personalizada declarada más de una vez con valores distintos — normalmente un valor por defecto en :root más una anulación bajo una media query de modo oscuro o una clase de tema. Cada aparición se muestra con su selector y número de línea para que veas exactamente dónde difieren los valores, en lugar de quedarte solo con el primero.
¿Qué significan "sin usar" o "indefinida" aquí?
Sin usar significa que una variable se declara con -- pero nunca se referencia mediante var(). Indefinida es lo contrario — algo llama a var(--nombre) pero --nombre nunca se declara en el CSS pegado. Ambos son restos comunes tras una refactorización, y las referencias indefinidas son las que de verdad conviene arreglar, ya que el navegador vuelve silenciosamente al valor inicial de la propiedad.
¿Detecta CSS dentro de @media u otros bloques anidados?
Sí. Un bloque :root anidado dentro de @media (prefers-color-scheme: dark) o una regla similar se atribuye correctamente a :root, no al contenedor @media.
¿Puedo usar los datos de ejemplo?
Sí. El widget carga con un ejemplo que incluye intencionadamente una redefinición en modo oscuro, una variable sin usar y una referencia indefinida, para que veas las tres comprobaciones en acción antes de pegar tu propio CSS.
¿Qué formatos de exportación hay disponibles?
Un bloque :root {} limpio, un mapa de tokens JSON plano o una lista simple de referencias var(--nombre) — copia o descarga el que mejor encaje con tu destino.
¿En qué formato debo pegar mi CSS?
Pega tus propiedades personalizadas CSS una declaración por línea, tal como aparecerían dentro de un bloque :root, por ejemplo `--brand: #0f766e;`. Cada línea se convierte en una fila de la lista extraída.
¿Hay un límite de cuánto CSS puedo pegar?
Sin límite fijo — todo se ejecuta localmente en tu navegador, así que la velocidad de extracción depende solo de tu dispositivo, no de un servidor.
Cómo nos comparamos
| Función | Online Tool Store | HTMLToolz CSS Variables Extractor | HexaTools CSS Variable Extractor |
|---|---|---|---|
| Encuentra variables en cualquier selector, no solo :root | ✓ | ✓ | Solo se comprueba :root |
| Marca redefiniciones en conflicto mostrando cada aparición | ✓ | No se muestra | Solo conserva la primera silenciosamente — no detecta la anulación faltante |
| Marca variables sin usar y referencias var() indefinidas | ✓ | No se muestra | No se muestra, pese a afirmar que audita el uso |
| :root dentro de @media resuelto al selector real | ✓ | No aplicable — solo salida :root | No se muestra |
| Exporta como bloque :root, JSON o lista var() | ✓ | ✓ | Solo lista simple |
Todo archivo CSS real que merece una auditoría tiene una anulación de modo oscuro o un token sin usar olvidado — justo el caso que un extractor que solo compara nombres pasa por alto, y donde este se ha comprobado directamente contra ellos.