Extractor de Variables CSS
Obtenga una lista ordenada de todas las variables personalizadas (--var) declaradas en su CSS
Escanea archivos CSS en busca de propiedades personalizadas y muestra sus nombres y valores.
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Cómo usar
- Pegue el código CSS.
- Haga clic en Extraer variables.
- Copie la variable para usarla en sus estilos.
Preguntas frecuentes
- ¿Se puede buscar en la lista?
- Sí, use el buscador para filtrar rápidamente las variables por nombre o valor.
- ¿También se extraen las variables declaradas dentro de una clase específica, como .dark-mode, en lugar de :root?
- Sí; la herramienta busca el patrón de declaración de propiedades personalizadas de CSS (que empieza con --) sin importar en qué selector esté, así que las variables de tema definidas dentro de una clase como .dark-mode o un selector como [data-theme="dark"] también se incluyen. Como la lista no registra a qué selector pertenecía cada una, una variable con el mismo nombre declarada en varios selectores con valores distintos puede aparecer más de una vez en el resultado.
- ¿También se extraen las variables declaradas dentro de una clase específica, como .dark-mode, en lugar de :root?
- Sí; la herramienta busca el patrón de declaración de propiedades personalizadas de CSS (que empieza con --) sin importar en qué selector esté, así que las variables de tema definidas dentro de una clase como .dark-mode o un selector como [data-theme="dark"] también se incluyen. Como la lista no registra a qué selector pertenecía cada una, una variable con el mismo nombre declarada en varios selectores con valores distintos puede aparecer más de una vez en el resultado.