Online Tool Store
Extractor de variabile CSS
Lipește CSS și extrage fiecare variabilă: redefiniri conflictuale, variabile nefolosite sau nedefinite depistate. Export ca :root, JSON sau listă var().
🔒 Acest instrument rulează în întregime în browserul tău. Fișierele tale nu sunt niciodată încărcate pe un server.
Instrument browser
Extractor de variabile CSS
Cum funcționează
- Începe cu exemplul deja încărcat sau lipește propriul CSS.
- Verifică rezumatul — fiecare variabilă găsită, orice redefinire cu valori conflictuale și variabilele nefolosite sau nedefinite.
- Consultă tabelul complet cu selectorul, valoarea și tipul dedus (culoare, lungime, font etc.) al fiecărei variabile.
- Alege un format de export — un bloc :root curat, JSON sau o listă var() — apoi copiază sau descarcă-l.
FAQ
Funcționează în browserul meu?
Da. CSS-ul tău este procesat local, pe pagină — nu se încarcă nimic și nu există niciun cont.
Ce se consideră o variabilă redefinită?
O proprietate personalizată declarată de mai multe ori cu valori diferite — de obicei o valoare implicită în :root plus o suprascriere sub o media query pentru modul întunecat sau o clasă de temă. Fiecare apariție este afișată cu selectorul și numărul de linie, astfel încât să vezi exact unde diferă valorile, în loc să păstreze silențios doar prima.
Ce înseamnă "nefolosită" sau "nedefinită" aici?
Nefolosită înseamnă că o variabilă este declarată cu -- dar nu este referențiată nicăieri prin var(). Nedefinită este situația inversă — ceva apelează var(--nume), dar --nume nu este declarată nicăieri în CSS-ul lipit. Ambele sunt resturi comune după o refactorizare, iar referințele nedefinite sunt cele care chiar merită reparate, deoarece browserul revine silențios la valoarea inițială a proprietății.
Gestionează CSS-ul din interiorul @media sau al altor blocuri imbricate?
Da. Un bloc :root imbricat în @media (prefers-color-scheme: dark) sau o regulă @ similară este atribuit corect lui :root, nu învelișului @media.
Pot folosi datele de exemplu?
Da. Widgetul se încarcă cu un exemplu care include intenționat o redefinire în modul întunecat, o variabilă nefolosită și o referință nedefinită, astfel încât să vezi toate cele trei verificări în acțiune înainte de a lipi propriul CSS.
Ce formate de export sunt disponibile?
Un bloc :root {} curat, o hartă de tokenuri JSON simplă sau o listă simplă de referințe var(--nume) — copiază sau descarcă-l pe cel potrivit destinației tale.
În ce format ar trebui să lipesc CSS-ul meu?
Lipește proprietățile personalizate CSS câte o declarație pe linie, așa cum ar apărea într-un bloc :root, de exemplu `--brand: #0f766e;`. Fiecare linie devine un rând în lista extrasă.
Există o limită a cantității de CSS pe care o pot lipi?
Fără limită fixă — totul rulează local în browserul tău, așa că viteza de extragere depinde doar de dispozitivul tău, nu de un server.
Cum ne comparăm
| Funcție | Online Tool Store | HTMLToolz CSS Variables Extractor | HexaTools CSS Variable Extractor |
|---|---|---|---|
| Găsește variabile sub orice selector, nu doar :root | ✓ | ✓ | Se verifică doar :root |
| Semnalează redefinirile conflictuale, afișând fiecare apariție | ✓ | Nu se afișează | Păstrează silențios doar prima — suprascrierea lipsă nu e detectată |
| Semnalează variabilele nefolosite și referințele var() nedefinite | ✓ | Nu se afișează | Nu se afișează, deși pretinde că auditează utilizarea |
| :root din interiorul @media rezolvat la selectorul real | ✓ | Nu se aplică — ieșire doar :root | Nu se afișează |
| Export ca bloc :root, JSON sau listă var() | ✓ | ✓ | Doar listă simplă |
Orice fișier CSS real care merită un audit are o suprascriere pentru modul întunecat sau un token nefolosit uitat — exact cazul pe care un extractor bazat doar pe nume îl ratează, și exact aici a fost testat acesta direct în raport cu ei.