Extraktor CSS farebných premenných
Nájdite každú farbu v CSS a premieňte ju na znovupoužiteľné custom properties.
Extraktor CSS farebných premenných
Vložte stylesheet a tento nástroj preskúša každú deklaráciu na hľadanie hodnôt farieb napísaných ako hex, rgb()/rgba() alebo hsl()/hsla(), a potom prepíše pravidlá na odkazovanie sa na custom properties namiesto opakovania tej istej hodnoty všade. Bol vytvorený na vyčistenie arkúša štýlov, ktorý rástol organicky — redesign, zlúčenie knižnice komponentov alebo CSS vytiahnuté z návrhárskeho nástroja — kde sa rovnaká modrá skončí napísaná tucetom mierne odlišných spôsobov.
Opcija pomenovania určuje, ako sa každá premenná pomenúva: podľa poradia prvého výskytu (--color-1, --color-2…), podľa približného tónu a jasu (--color-dark-blue, --color-light-gray) alebo podľa vlastnosti, v ktorej sa prvýkrát objavila (--color-background, --color-border). Zapnite možnosť "Zlúčiť rovnaké farby napísané inak" na zloženie #ff0000, rgb(255, 0, 0) a hsl(0, 100%, 50%) do jednej premennej, aj keď sa zdrojový text líši; identické hodnoty sú vždy zlúčené bez ohľadu. Posuvník podobnosti ide ďalej a zlúčuje tóny, ktoré sú blízke, ale nie totožné — užitočné, keď sa paleta nahromadila takmer duplikátnych sivých alebo modrých, ktoré nikto nezamýšľal vytvoriť. Vyberte si, či sa vygenerovaný blok nachádza pod :root alebo vlastným selectorom, vyberte si notáciu, v ktorej sa premenné tlačia, alebo prejdite na jednoduchý zoznam farieb a počty výskytov, keď chcete iba audit namiesto prepisu.
Skener sa pozerá iba do skutočných hodnôt deklarácie, takže si nikdy neplieť selektor ID ako #abcabc za farbu a úplne nechá nezmenenú komentáre, citované reťazce a obsah url(). Fungujú okná aj Unix koniec riadka a nástroj sa nenechá zmiasť vnoriacimi sa funkciami, ako je farba v zozname gradientov.
Všetko beží lokálne vo vašom prehliadači — váš stylesheet sa nikdy nikam nenahrá, takže je bezpečné vložiť kód z privátneho projektu. Skopírujte výsledok, stiahnite ho ako súbor .txt alebo odošlite výstup späť na vstup na jej spresnenie ďalším prichodom.