Anúncios incomodam? Ir Sem anúncios Hoje 

Extração de Propriedades CSS Personalizadas

DesenvolvedorTexto

ANUNCIADO Remover?

ENTRADA

Processo Automático

SAÍDA

Lado cliente

ANUNCIADO Remover?

Guia

Extração de Propriedades CSS Personalizadas

Cole qualquer folha de estilo CSS ou SCSS e obtenha instantaneamente uma lista limpa, ordenada e deduplicada de todas as --custom-property declaradas nele — juntamente com o escopo do seletor em que foi declarada. O extrator também mostra variáveis que são referenciadas via var(--name) mas nunca declaradas em qualquer lugar, o que é uma causa comum de estilos quebrados em grandes sistemas de design.

Como usar

Cole sua folha de estilo no Entrada CSS / SCSS campo (ou clique Tente um exemplo para carregar um exemplo).
Escolha um Formato de saídacampo para tabela de texto simples, objeto JSON ou um bloco pronto para colar :root { } .
Use o Filtro campo para limitar o resultado pelo nome da variável, valor ou escopo.
Alternar Incluir escopo do seletor para controlar se a tabela mostra onde cada variável foi declarada.
Revise a Variáveis Não Definidas para quaisquer var(--name) referências que não têm declaração correspondente.
Copie ou baixe a lista extraída com os botões no painel de saída.

Características

Analizador consciente de chaves – percorre o estilo caracter por caracter para lidar corretamente com seletores aninhados, consultas de mídia e valores entre aspas.
Rastreamento de escopo – cada variável é associada ao seletor ou regra que a declarou, para que você possa distinguir um token de uma sobrescrita com escopo de componente. :root – tabela de texto simples para revisão, objeto JSON para uso programático e um bloco limpo que pode ser colado de volta em uma folha de estilo.
Três formatos de saída Detecção de variáveis não definidas :root { } – marca qualquer
que não tem declaração correspondente em qualquer parte da entrada. Filtro em tempo real var(--name) – digite para limitar o resultado pelo nome da variável, valor ou escopo do seletor em tempo real.
Dedupe e ordenação – declarações duplicadas dentro do mesmo escopo são combinadas e a lista é ordenada alfabeticamente para facilitar a escaneamento.
– nada é enviado; funciona com estilos privados e não finalizados. Auditoria de uma folha de estilo de sistema de design para criar uma lista master de tokens.
Executa totalmente no navegador Migração de variáveis SCSS para propriedades CSS personalizadas.

Quando usar esta ferramenta

Localização de um estilo quebrado causado por uma referência mal escrita.
Geração de um bloco inicial
a partir de um tema de terceiro. var() Exportação de tokens como JSON para uso em um site de documentação ou entrada do Storybook.
O que é uma propriedade CSS personalizada? :root { } Uma propriedade CSS personalizada (também chamada de variável CSS) é um identificador definido pelo autor prefixado com dois traços (por exemplo, --color-primary) cujo valor pode ser reutilizado em qualquer parte do estilo através da função var(). Diferentemente das variáveis de pré-processador, as propriedades personalizadas são resolvidas no tempo de execução pelo navegador, o que significa que elas cascata e herdam como qualquer outra propriedade CSS e podem ser atualizadas dinamicamente com JavaScript.
Como o escopo do seletor afeta uma propriedade personalizada?

 Perguntas frequentes

Uma propriedade personalizada existe apenas dentro da subárvore do elemento que a declara. Declara-la em :root torna-a efetivamente global porque :root corresponde ao elemento html, enquanto declará-la dentro de um seletor de componente como .card limita seu valor a esse componente e seus descendentes. O mesmo nome pode ter valores diferentes em diferentes escopos, o que é a mecânica por trás de temas, alternância de modo escuro e sobrescritas de nível de componente.

Por que o CSS não gera erro quando var() aponta para uma propriedade personalizada não definida?
O especificação de propriedades CSS personalizadas exige que o navegador faça uma falha silenciosa quando uma variável referenciada não foi declarada. Se var() não tiver um argumento de fallback, toda a propriedade é tratada como se tivesse o valor unset, o que muitas vezes deixa um elemento com seu valor inicial ou herdado. Como nenhum erro é relatado no console, referências não declaradas são fáceis de passar despercebidas, e a exposição delas no início previne regressões visuais sutis.

As variáveis SCSS e as propriedades CSS personalizadas são a mesma coisa?
Elas têm um papel semelhante, mas existem em estágios diferentes do pipeline. As variáveis SCSS, escritas com um sinal de dólar como $color-primary, são resolvidas quando o SCSS é compilado para CSS e desaparecem do resultado final. As propriedades CSS personalizadas prefixadas com dois traços sobrevivem à compilação e são avaliadas pelo navegador no momento de renderização, o que permite temas em tempo de execução e atualizações impulsionadas por JavaScript.

Uma propriedade personalizada pode ser redeclarada e o que acontece então?
Sim. Quando a mesma propriedade personalizada é declarada mais de uma vez para o mesmo elemento, o normal cascade CSS decide qual declaração vence, levando em conta a especificidade, a ordem de origem e a importância. Dentro de uma única regra, a declaração final sobrescreve as anteriores, o que é o mesmo comportamento de resolução de conflito que se aplica a qualquer outra propriedade CSS.

Cole sua folha de estilo CSS ou SCSS aqui
Filtrar por nome da variável ou valor

Extração de Propriedades CSS Personalizadas 1