Extrator de variáveis CSS

• Extração de variáveis CSS instantânea: nosso extrator de variáveis CSS analisa toda a sua folha de estilo e encontra cada declaração --custom-property em milissegundos. Extraia variáveis CSS de qualquer folha de estilo (design systems, bibliotecas de componentes ou arquivos de tema) instantaneamente no seu navegador.
• Extrator de variáveis CSS online seguro: toda a extração de variáveis CSS roda inteiramente no seu navegador. O código da sua folha de estilo nunca sai do seu dispositivo, garantindo privacidade total quando você extrai variáveis CSS online.
• Extrator de variáveis CSS sem instalação: use nosso extrator de variáveis CSS diretamente em qualquer navegador, sem downloads, plugins ou conta. Extraia propriedades personalizadas do CSS de qualquer dispositivo (desktop, tablet ou celular) gratuitamente.
• 7 formatos de exportação para cada fluxo de trabalho: nosso extrator de variáveis CSS exporta para blocos CSS :root, JSON, objetos JavaScript, objetos const TypeScript, mapas SCSS, listas simples e tabelas Markdown, cobrindo pipelines de design tokens, documentação e fluxos de geração de código.

• Documentação de design tokens: equipes de design system usam nosso extrator de variáveis CSS para gerar tabelas Markdown com todos os design tokens da sua folha de estilo. Exporte cada variável --color, --spacing e --font para um formato pronto para documentação instantaneamente.
• Integração em pipelines de design tokens: engenheiros de frontend usam nosso extrator de variáveis CSS para exportar as propriedades personalizadas do CSS como JSON e integrá-las a ferramentas de design tokens como Style Dictionary, Theo ou pipelines de build próprios.
• Migração e refatoração de temas: desenvolvedores migrando entre frameworks CSS ou refatorando arquivos de tema usam nosso extrator de variáveis CSS para auditar todas as propriedades personalizadas de uma folha de estilo. Identifique cada variável, seu valor e o seletor ao qual pertence.
• Integração de design system em TypeScript: desenvolvedores TypeScript usam nosso extrator de variáveis CSS para gerar objetos const com tipagem segura a partir das suas variáveis CSS. Obtenha autocompletar e verificação de tipos para nomes de propriedades personalizadas do CSS no seu código TypeScript.
• Conversão de design system para SCSS: equipes que convertem propriedades personalizadas do CSS em variáveis SCSS usam nosso extrator para gerar mapas SCSS a partir das suas declarações :root. Exporte todas as variáveis CSS como um $map SCSS pronto para usar na sua base de código SCSS.
• Auditoria de modo escuro e temas: desenvolvedores que criam temas de modo escuro usam nosso extrator de variáveis CSS para comparar variáveis entre seletores. Filtre por :root vs [data-theme="dark"] para ver exatamente quais variáveis são sobrescritas em cada tema.

As propriedades personalizadas do CSS (também chamadas de variáveis CSS) são entidades definidas por quem escreve o CSS que contêm valores específicos para serem reutilizados em todo um documento. Elas são definidas com o prefixo -- (por exemplo, --color-primary: #3b82f6) e acessadas com a função var(). As propriedades personalizadas do CSS são definidas dentro de um seletor CSS (mais comumente :root para escopo global) e cascateiam como qualquer outra propriedade CSS. Nosso extrator de variáveis CSS analisa toda a sua folha de estilo e encontra cada declaração de propriedade personalizada, independentemente do seletor em que apareça.

1. Cole seu CSS: insira qualquer folha de estilo CSS: um arquivo completo de design system, uma folha de estilo de componente ou um arquivo de tema. Nosso extrator de variáveis CSS aceita qualquer CSS válido, incluindo folhas de estilo minificadas, regras com vários seletores e declarações de propriedades personalizadas aninhadas.
2. Extração instantânea no navegador: clique em Extrair variáveis e a ferramenta analisa cada linha em busca de padrões --propriedade: valor, rastreia a qual seletor cada variável pertence e aplica seus filtros de escopo e ordenação. Todo o processamento roda localmente no seu navegador: seu CSS nunca sai do seu dispositivo.
3. Copie ou baixe a saída: as variáveis CSS extraídas são exibidas no formato escolhido. Copie para a área de transferência ou baixe como arquivo .css, .json, .ts ou .scss.

• Bloco CSS :root: agrupa as variáveis extraídas por seletor e as formata como blocos CSS válidos, prontos para colar diretamente em uma folha de estilo ou arquivo de design tokens.
• JSON / JavaScript / TypeScript: exporta as variáveis como objetos chave-valor para uso em pipelines de design tokens, sistemas de theming em JavaScript ou bases de código TypeScript com referências de nomes de variáveis com tipagem segura.
• Mapa SCSS: gera um mapa SCSS $css-variables para uso em design systems baseados em SCSS, permitindo acesso programático aos valores das variáveis CSS em funções e mixins SCSS.
• Tabela Markdown: cria uma tabela pronta para documentação com colunas de nome da variável, valor e seletor, perfeita para guias de estilo, documentação de design systems e referências em revisões de código.

O filtro de escopo permite extrair apenas variáveis de :root (design tokens globais), apenas variáveis que não são de :root (sobrescritas no nível do componente), ou todas as variáveis de toda a folha de estilo. As opções de ordenação permitem ordenar as variáveis por ordem de origem (como aparecem no CSS), alfabeticamente por nome, ou agrupadas por seletor, facilitando a organização de grandes design systems com centenas de propriedades personalizadas.