¿Odias los anuncios? Ir Sin publicidad Hoy 

Extraedor de propiedades personalizadas de CSS

DesarrolladorTexto

ANUNCIO · ¿ELIMINAR?

APORTE

Proceso automático

PROD.

Lado cliente

ANUNCIO · ¿ELIMINAR?

Guía

Extractador de Propiedades Personalizadas de CSS

Extraedor de propiedades personalizadas de CSS

Pega cualquier hoja de estilo CSS o SCSS y obtén inmediatamente una lista limpia, ordenada y deduplicada de todas las --custom-property declaradas en ella — junto con el alcance del selector en el que fueron declaradas. El extractores también muestra variables que son referenciadas mediante var(--name) pero nunca declaradas en ningún lugar, lo cual es una causa común de estilos rotos en grandes sistemas de diseño.

Cómo Usar

Pega tu hoja de estilo en el Entrada CSS / SCSS cuadro (o haz clic Prueba un ejemplo para cargar un ejemplo).
Elige un Formato de salida: una tabla de texto plano, un objeto JSON o un bloque listo para pegar :root { } .
Utiliza el Filtrar campo para reducir el resultado por nombre de variable, valor o alcance.
Palanca Incluir alcance del selector para controlar si la tabla muestra dónde se declaró cada variable.
Revisa el Panel de variables no definidas para cualquier var(--name) referencia que no tenga declaración coincidente.
Copia o descarga la lista extraída con los botones del panel de salida.

Características

Analizador consciente de llaves – recorre la hoja de estilo carácter por carácter para manejar correctamente selectores anidados, consultas de medios y valores entre comillas.
Rastreo de alcance – cada variable se asocia con el selector o regla de at que la declaró, así puedes distinguir un :root token de una sobrescritura en alcance de componente.
Tres formatos de salida – tabla de texto plano para revisar, objeto JSON para uso programático y un bloque limpio que puedes pegar de nuevo en una hoja de estilo. :root { } Detección de variables no definidas
– marca cualquier que no tenga declaración coincidente en cualquier parte de la entrada. var(--name) Filtro en tiempo real
– escribe para reducir el resultado por nombre de variable, valor o alcance del selector en tiempo real. Dedupe y ordenación
– las declaraciones duplicadas dentro del mismo alcance se agrupan y la lista se ordena alfabéticamente para una revisión rápida. – nada se sube; funciona con hojas de estilo privadas o incompletas.
Funciona completamente en tu navegador Auditar una hoja de estilo de sistema de diseño para construir una lista maestra de tokens.

Cuándo utilizar esta herramienta

Migrar variables SCSS a propiedades CSS personalizadas.
Buscar un estilo roto causado por una referencia mal escrita.
Generar un bloque de inicio var() a partir de un tema de terceros.
Exportar tokens como JSON para su uso en un sitio de documentación o en una entrada de Storybook. :root { } ¿Qué es una propiedad CSS personalizada?
Una propiedad CSS personalizada (también llamada variable CSS) es un identificador definido por el autor que comienza con dos guiones (por ejemplo, --color-primary) cuyo valor puede reutilizarse en cualquier parte de la hoja de estilo mediante la función var(). A diferencia de las variables de preprocesador, las propiedades personalizadas se resuelven en tiempo de ejecución por el navegador, lo que significa que cascaden y heredan como cualquier otra propiedad CSS y pueden actualizarse dinámicamente con JavaScript.

 Preguntas frecuentes

¿Cómo afecta el alcance del selector a una propiedad personalizada?

Una propiedad personalizada existe únicamente dentro del subárbol del elemento que la declara. Declararla en :root la hace efectivamente global porque :root coincide con el elemento html, mientras que declararla dentro de un selector de componente como .card limita su valor a ese componente y a sus descendientes. El mismo nombre puede tener valores diferentes en diferentes alcances, lo cual es la mecánica detrás de los temas, los interruptores de modo oscuro y las sobrescrituras a nivel de componente.
¿Por qué CSS no genera un error cuando var() apunta a una propiedad personalizada no definida?

La especificación de propiedades CSS personalizadas exige que el navegador realice un fallback silencioso cuando una variable referenciada no ha sido declarada. Si var() no tiene un argumento de fallback, toda la propiedad se trata como si tuviera el valor unset, lo que a menudo deja al elemento con su valor inicial o heredado. Como no se muestra un error en la consola, las referencias no declaradas son fáciles de pasar por alto, y su detección al inicio previene regresiones visuales sutiles.
¿Son iguales las variables SCSS y las propiedades CSS personalizadas?

Tienen un papel similar, pero existen en etapas diferentes del pipeline. Las variables SCSS, escritas con un signo de dólar como $color-primary, se resuelven cuando SCSS se compila a CSS y desaparecen del resultado final. Las propiedades CSS personalizadas que comienzan con dos guiones sobreviven a la compilación y se evalúan por el navegador en tiempo de renderizado, lo que permite theming dinámico y actualizaciones impulsadas por JavaScript.
¿Puede una propiedad personalizada ser redeclarada y qué ocurre entonces?

Sí. Cuando la misma propiedad personalizada se declara más de una vez en el mismo elemento, el normal cascado de CSS decide cuál declaración gana, teniendo en cuenta la especificidad, el orden de origen y la importancia. Dentro de una sola regla, la última declaración sobrescribe a las anteriores, lo cual es el mismo comportamiento de resolución de conflictos que se aplica a cualquier otra propiedad CSS.
Pega tu hoja de estilo CSS o SCSS aquí

Filtrar por nombre de variable o valor