Extractor de variables CSS

• Extracción de variables CSS instantánea: nuestro extractor de variables CSS analiza toda tu hoja de estilo y encuentra cada declaración --custom-property en milisegundos. Extrae variables CSS de cualquier hoja de estilo (sistemas de diseño, bibliotecas de componentes o archivos de tema) al instante en tu navegador.
• Extractor de variables CSS online seguro: toda la extracción de variables CSS se ejecuta por completo en tu navegador. El código de tu hoja de estilo nunca sale de tu dispositivo, lo que garantiza total privacidad cuando extraes variables CSS online.
• Extractor de variables CSS sin instalación: usa nuestro extractor de variables CSS directamente en cualquier navegador, sin descargas, plugins ni cuenta. Extrae propiedades personalizadas de CSS desde cualquier dispositivo (escritorio, tableta o móvil) gratis.
• 7 formatos de exportación para cada flujo de trabajo: nuestro extractor de variables CSS exporta a bloques CSS :root, JSON, objetos de JavaScript, objetos const de TypeScript, mapas SCSS, listas planas y tablas Markdown, cubriendo pipelines de design tokens, documentación y flujos de generación de código.

• Documentación de design tokens: los equipos de sistemas de diseño usan nuestro extractor de variables CSS para generar tablas Markdown con todos los design tokens de su hoja de estilo. Exporta cada variable --color, --spacing y --font a un formato listo para documentación al instante.
• Integración en pipelines de design tokens: los ingenieros de frontend usan nuestro extractor de variables CSS para exportar las propiedades personalizadas de CSS como JSON e integrarlas con herramientas de design tokens como Style Dictionary, Theo o pipelines de compilación propios.
• Migración y refactorización de temas: los desarrolladores que migran entre frameworks CSS o refactorizan archivos de tema usan nuestro extractor de variables CSS para auditar todas las propiedades personalizadas de una hoja de estilo. Identifica cada variable, su valor y el selector al que pertenece.
• Integración de sistemas de diseño en TypeScript: los desarrolladores de TypeScript usan nuestro extractor de variables CSS para generar objetos const con tipado seguro a partir de sus variables CSS. Obtén autocompletado y comprobación de tipos para los nombres de propiedades personalizadas de CSS en tu código TypeScript.
• Conversión de sistemas de diseño a SCSS: los equipos que convierten propiedades personalizadas de CSS a variables SCSS usan nuestro extractor para generar mapas SCSS a partir de sus declaraciones :root. Exporta todas las variables CSS como un $map de SCSS listo para usar en tu base de código SCSS.
• Auditoría de modo oscuro y temas: los desarrolladores que crean temas de modo oscuro usan nuestro extractor de variables CSS para comparar variables entre selectores. Filtra por :root frente a [data-theme="dark"] para ver exactamente qué variables se sobrescriben en cada tema.

Las propiedades personalizadas de CSS (también llamadas variables CSS) son entidades definidas por quienes escriben el CSS que contienen valores específicos para reutilizarlos en todo un documento. Se definen con el prefijo -- (por ejemplo, --color-primary: #3b82f6) y se accede a ellas con la función var(). Las propiedades personalizadas de CSS se definen dentro de un selector CSS (habitualmente :root para el ámbito global) y se propagan en cascada como cualquier otra propiedad CSS. Nuestro extractor de variables CSS analiza toda tu hoja de estilo y encuentra cada declaración de propiedad personalizada, sin importar en qué selector aparezca.

1. Pega tu CSS: introduce cualquier hoja de estilo CSS: un archivo completo de sistema de diseño, una hoja de estilo de componente o un archivo de tema. Nuestro extractor de variables CSS acepta cualquier CSS válido, incluidas hojas de estilo minificadas, reglas con varios selectores y declaraciones de propiedades personalizadas anidadas.
2. Extracción instantánea en el navegador: haz clic en Extraer variables y la herramienta analiza cada línea en busca de patrones --propiedad: valor, registra a qué selector pertenece cada variable y aplica tus filtros de ámbito y ordenación. Todo el procesamiento se ejecuta localmente en tu navegador: tu CSS nunca sale de tu dispositivo.
3. Copia o descarga la salida: las variables CSS extraídas se muestran en el formato que hayas elegido. Cópialas al portapapeles o descárgalas como archivo .css, .json, .ts o .scss.

• Bloque CSS :root: agrupa las variables extraídas por selector y las formatea como bloques CSS válidos, listos para pegar directamente en una hoja de estilo o en un archivo de design tokens.
• JSON / JavaScript / TypeScript: exporta las variables como objetos clave-valor para usarlos en pipelines de design tokens, sistemas de theming en JavaScript o bases de código TypeScript con referencias a nombres de variables con tipado seguro.
• Mapa SCSS: genera un mapa SCSS $css-variables para usar en sistemas de diseño basados en SCSS, lo que permite acceder de forma programática a los valores de las variables CSS en funciones y mixins de SCSS.
• Tabla Markdown: crea una tabla lista para documentación con columnas de nombre de variable, valor y selector, perfecta para guías de estilo, documentación de sistemas de diseño y referencias en revisiones de código.

El filtro de ámbito te permite extraer solo las variables de :root (design tokens globales), solo las que no son de :root (sobrescrituras a nivel de componente) o todas las variables de la hoja de estilo completa. Las opciones de ordenación te permiten ordenar las variables por orden de aparición en el origen (tal como aparecen en el CSS), alfabéticamente por nombre o agrupadas por selector, lo que facilita organizar grandes sistemas de diseño con cientos de propiedades personalizadas.