Extractor de variabile de culoare CSS
Găsește fiecare culoare în CSS-ul tău și transformo-o în proprietăți personalizate reutilizabile.
Extractor de variabile de culoare CSS
Lipește un fișier CSS și acest instrument scanează fiecare declarație pentru valori de culoare scrise ca hex, rgb()/rgba() sau hsl()/hsla(), apoi rescrie regulile pentru a face referință la proprietăți personalizate în loc să repete aceeași valoare peste tot. A fost construită pentru a curăța un fișier CSS care a crescut organic — o reproiectare, o fuzionare a bibliotecii de componente sau CSS extras dintr-o unealtă de design — unde aceeași albastru ajunge să fie scris o duzină de moduri ușor diferite.
Opțiunea de denumire controlează cum este numită fiecare variabilă: după ordinea de primă apariție (--color-1, --color-2…), după o nuanță aproximativă și luminozitate (--color-dark-blue, --color-light-gray), sau după proprietatea în care apare pentru prima dată (--color-background, --color-border). Activează "fuzionează culorile identice scrise diferit" pentru a plia #ff0000, rgb(255, 0, 0) și hsl(0, 100%, 50%) în o singură variabilă chiar dacă textul sursă diferă; valorile identice sunt întotdeauna fuzionate indiferent. Cursorul de similitudine merge mai departe și fuzionează nuanțele care sunt apropiate dar nu identice — util atunci când o paletă a acumulat gri sau albastru aproape-duplicate pe care nimeni nu avea de gând să le creeze. Alege dacă blocul generat stă sub :root sau un selector personalizat, alege notația cu care variabilele se tipăresc, sau treci la o simplă listă de culori și număruri de apariții când vrei doar o audit decât o rescripture.
Scanerul caută doar în valorile declarației reale, deci nu confundă niciodată un selector de ID ca #abcabc cu o culoare, și lasă comentariile, șirurile de caractere citate și conținuturile url() complet nemodificate. Terminațiile de linie Windows și Unix funcționează ambele, iar instrumentul nu este păcălit de funcții imbricate ca o culoare în interiorul unei liste de gradient.
Totul funcționează local în browserul tău — fișierul tău CSS nu este niciodată încărcat nicăieri, deci este sigur să lipești cod dintr-un proiect privat. Copiază rezultatul, descarcă-l ca fișier .txt, sau trimite rezultatul înapoi la intrare pentru a-l rafina cu o altă trecere.