Extrator de Propriedades Customizadas do CSS
Extraia cada propriedade customizada do CSS (--variable) declarada em uma folha de estilos, com seu valor declarado e quantas vezes é referenciada via var() — útil para auditorias de design system e para identificar variáveis não utilizadas.
Entrada
Saída
| Nome da Propriedade | Valor Declarado | Contagem de Uso |
|---|---|---|
| No data yet | ||
Mais formas de usar esta ferramenta
API REST
curl -X POST https://api.iotools.cloud/v1/tool/css-custom-property-extractor \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"cssInput": ":root {\n --primary-color: #464aff;\n --spacing:…"
}'Troque pela sua própria chave, da sua conta. Os campos da ferramenta viram o corpo da requisição — sem envelope.
Peça a um agente de IA
Use the IOTools `css-custom-property-extractor` tool (CSS Custom Property Extractor) on this input:
YOUR_INPUT_HERECole isto em qualquer agente conectado ao servidor MCP do IOTools e depois adicione sua entrada.
Widget para incorporar
<iframe
src="https://iotools.cloud/embed/css-custom-property-extractor/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Extrator de Propriedades Customizadas do CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Coloque isso na sua própria página — grátis, sem chave, só um link de volta.
| Custo por chamada de API/MCP | A partir de 5 créditos |
|---|---|
| Precisa de mais créditos? | Ver preços |
Também disponível via
Guias
O que são propriedades customizadas do CSS?
Propriedades customizadas do CSS — comumente chamadas de variáveis CSS — são valores declarados com um prefixo -- (--primary-color: #464aff;) e consumidos em outro lugar com var(--primary-color). Elas potencializam design tokens para paletas de cores, escalas de espaçamento, tipografia e temas (incluindo overrides de modo escuro com prefers-color-scheme), permitindo que uma única declaração atualize cada lugar em que é referenciada.
Essa flexibilidade tem um custo: conforme uma folha de estilos cresce, fica difícil responder perguntas simples apenas lendo o código-fonte — quais variáveis realmente existem, qual valor definimos e alguém ainda está usando esta? Esta ferramenta responde todos os três de uma vez.
O que esta ferramenta faz
Cole (ou envie) um arquivo CSS ou SCSS e a ferramenta o analisa em busca de:
- Declarações — cada par
--property-name: value;, na ordem em que aparecem primeiro. - Usos — cada referência
var(--property-name), contada por propriedade.
O resultado é uma tabela de cada propriedade customizada com seu nome, valor declarado e quantas vezes é usada via var() — além de um resumo de uma linha dos totais. Uma propriedade declarada mas nunca referenciada (contagem de uso 0) é um forte indicador de que é peso morto seguro para remover.
Por que extrair e auditar propriedades customizadas?
- Auditorias de design system. Confirme se sua lista de tokens corresponde à sua especificação de design e identifique cores ou valores de espaçamento pontuais que entraram fora do sistema de tokens.
- Detecção de variáveis não utilizadas. Uma contagem de uso
0marca variáveis que ninguém mais referencia — útil antes de uma limpeza ou uma iniciativa de redução de tamanho de pacote CSS. - Integração e documentação. Gere uma referência rápida de cada token que uma base de código define, sem procurar manualmente pelos blocos
:root. - Verificações de segurança de refatoração. Antes de renomear ou remover uma variável, veja exatamente quantos lugares a referenciada.
Como usar
- Cole seu CSS ou SCSS na caixa de entrada, ou arraste um arquivo
.css/.scsspara o carregador. - A tabela se atualiza automaticamente conforme você digita — sem necessidade de clicar em um botão.
- Copie ou baixe os resultados como CSV para um documento de auditoria de design system ou um ticket de limpeza.
FAQ
Isso entende $variables SCSS ou aninhamento?
Não — apenas corresponde a propriedades customizadas CSS nativas (sintaxe --name). Variáveis Sass ($name) e recursos de pré-processador CSS não são analisados, pois são compilados antes de chegar ao navegador.
Rastreia em qual seletor uma propriedade foi declarada ou usada?
Não — esta é uma análise plana de toda a folha de estilos. Uma propriedade redeclarada em um bloco @media para modo escuro ainda é uma linha (seu último valor declarado vence), e um uso dentro de qualquer regra conta para o total dessa propriedade.
Uma valor de fallback conta, como var(--gap, 8px)?
Sim — um argumento fallback não impede que um uso seja contado como uma referência a --gap.
Privacidade
Tudo é executado localmente no seu navegador. Seu CSS nunca é enviado ou armazenado em lugar nenhum.