Analisi variabili CSS
Estrai le custom property CSS, conta i riferimenti alla funzione var() e individua le variabili dichiarate ma mai usate.
Esegui lo strumento
Questo strumento analizza frammenti di codice CSS ed esamina la struttura delle proprietà personalizzate. Quando inserisci il testo del foglio di stile nel campo dedicato, il motore individua le dichiarazioni che iniziano con il doppio trattino e si concludono con un punto e virgola, ripulendo gli spazi superflui attorno ai singoli valori. Accanto all'elenco delle variabili trovate, l'analizzatore rintraccia ogni occorrenza della funzione var() associata a ciascun nome, calcolando quante volte compare nei selettori. Il riepilogo finale confronta le definizioni con i richiami effettivi, evidenziando le proprietà dichiarate ma mai utilizzate nel codice fornito. Questa scansione ti permette di individuare rapidamente errori di battitura, variabili orfane e valori duplicati prima di distribuire il tuo tema. Se il campo di testo rimane vuoto o privo di sintassi valida, l'interfaccia segnala l'assenza di dati da elaborare, guidandoti verso un inserimento corretto.
Istruzioni
- Incolla il codice CSS o le regole del tuo foglio di stile nell'area di testo.
- Avvia l'analisi per esaminare le dichiarazioni di proprietà personalizzate.
- Controlla l'elenco delle variabili estratte con i relativi valori ripuliti.
- Verifica il conteggio dei richiami var() e la lista delle variabili prive di riferimenti.
Esempi
- :root { --bg-main: #ffffff; --text-color: #222222; } body { background-color: var(--bg-main); color: var(--text-color); }
- :root { --brand-blue: #0066cc; --unused-padding: 16px; } h1 { color: var(--brand-blue); }
FAQ
Quale formato devono avere le variabili per il riconoscimento?
Il modulo riconosce le dichiarazioni con prefisso a doppio trattino seguite da due punti, valore e punto e virgola, oltre ai richiami var(--nome-variabile).
Cosa accade quando dichiari una variabile senza usarla?
Il riepilogo contrassegna la proprietà nell'elenco delle variabili prive di riferimenti, indicando zero utilizzi nei selettori analizzati.
Come gestire un messaggio di input mancante?
Se l'interfaccia segnala l'assenza di dati, inserisci un blocco CSS valido nel campo di testo prima di procedere con l'elaborazione.