Extraktor CSS barevných proměnných
Najděte každou barvu v CSS a převeďte ji na opakovaně použitelné custom properties.
Extraktor CSS barevných proměnných
Vložte stylesheet a tento nástroj prohledá každou deklaraci na hledání hodnot barev napsaných jako hex, rgb()/rgba() nebo hsl()/hsla(), a poté přepíše pravidla tak, aby odkazovala na custom properties místo opakování stejné hodnoty všude. Byl vytvořen na vyčištění stylů, které rostly organicky — redesign, sloučení knihovny komponent nebo CSS vytažené z návrháře — kde se stejná modrá skončí napsaná tuctem mírně odlišných způsobů.
Možnost pojmenování určuje, jak se jednotlivé proměnné jmenují: podle pořadí prvního výskytu (--color-1, --color-2…), podle přibližného tónu a světlosti (--color-dark-blue, --color-light-gray) nebo podle vlastnosti, ve které se poprvé objevila (--color-background, --color-border). Zapněte možnost "Sloučit stejné barvy napsané jinak" pro sloučení #ff0000, rgb(255, 0, 0) a hsl(0, 100%, 50%) do jediné proměnné, i když se zdrojový text liší; shodné hodnoty se vždy sloučí bez ohledu. Jezdec podobnosti jde dále a sloučuje tóny, které jsou blízké, ale ne identické — užitečné, když se paleta hromadila téměř duplikátních šedin nebo modrých, které nikdo nezamýšlel vytvořit. Zvolte, zda se generovaný blok nachází pod :root nebo vlastním selektorem, vyberte si notaci, ve které se proměnné tisknou, nebo přepněte na prostý seznam barev a počet výskytů, pokud chcete pouze audit místo přepsání.
Skener se dívá pouze do skutečných hodnot deklarace, takže si nikdy nemění selektor ID jako #abcabc za barvu a zcela nezmění komentáře, uvozovány řetězce a obsah url(). Fungují okna i Unixové konci řádků a nástroj se nenechá zmást vnořenými funkcemi, jako je barva v seznamu gradientů.
Vše běží lokálně ve vašem prohlížeči — váš stylesheet se nikdy nikam neodešle, takže je bezpečné vložit kód ze soukromého projektu. Zkopírujte výsledek, stáhněte jej jako soubor .txt nebo odešlete výstup zpět na vstup pro jeho oprávnění dalším průchodem.