Analizador de variables CSS
Extrae propiedades personalizadas CSS, contabiliza las referencias var() y localiza variables sin usar en tu código.
Ejecutar herramienta
Analiza fragmentos de código CSS para extraer propiedades personalizadas y calcular su frecuencia de uso. Al pegar hojas de estilo completas o bloques parciales, el analizador detecta las declaraciones estructuradas bajo el patrón de dos guiones iniciales, seguidas de dos puntos, su valor asignado y el punto y coma final. Paralelamente, localiza e identifica cada referencia que emplea la sintaxis con la función de variable correspondiente, contando cuántas veces aparece cada identificador en el texto. Con este contraste, el informe desglosa las variables declaradas, calcula los totales globales y destaca aquellas propiedades que no presentan llamadas asociadas en el fragmento examinado. Esto facilita una revisión rápida de hojas de estilo grandes, la detección de variables huérfanas antes de refactorizaciones y la comprobación de nombres duplicados o desaprovechados en archivos de diseño web, sin necesidad de configuraciones previas.
Instrucciones
- Pega o escribe tu fragmento de código CSS en el área de texto principal.
- Asegúrate de que las variables usen el formato estándar con dos guiones al inicio y terminen en punto y coma.
- Pulsa el botón de análisis para procesar las declaraciones y referencias.
- Examina la lista de propiedades detectadas, el recuento de uso de cada variable y las declaraciones sin referencias.
Ejemplos
- Entrada con :root { --color-primary: #0070f3; --font-base: 16px; } body { color: var(--color-primary); } para ver --color-primary con una referencia y --font-base como variable sin referencias.
- Entrada con .card { --card-padding: 1rem; --card-bg: #fff; padding: var(--card-padding); background: var(--card-bg); } para confirmar que ambas propiedades tienen un recuento de uso registrado.
Preguntas frecuentes
¿Qué formato deben tener las variables CSS para que se reconozcan?
El analizador reconoce nombres que comiencen por dos guiones, seguidos de caracteres alfanuméricos o guiones, dos puntos, el valor y un punto y coma de cierre.
¿Qué ocurre si se introduce un texto CSS vacío?
Si el campo de entrada está vacío, la herramienta te pedirá que introduzcas un fragmento de CSS válido.
¿Cómo se contabilizan las referencias con valores de reserva?
La herramienta cuenta cualquier llamada que empiece por var() con el nombre de la variable, incluyendo el contenido o valor alternativo dentro de sus paréntesis.
¿El analizador evalúa cálculos matemáticos o reglas complejas de CSS?
No. La herramienta busca coincidencias de referencias según patrones sintácticos, sin interpretar reglas complejas de CSS.