Ekstraktory zmiennych kolorów CSS
Znajdź każdy kolor w CSS i zmień go na wielokrotnie użyteczne custom properties.
Ekstraktory zmiennych kolorów CSS
Wklej arkusz stylów, a to narzędzie przeskanuje każdą deklarację w poszukiwaniu wartości kolorów napisanych jako hex, rgb()/rgba() lub hsl()/hsla(), a następnie przepisz reguły, aby odwoływały się do custom properties zamiast powtarzania tej samej wartości wszędzie. Został stworzony do czyszczenia arkusza stylów, który rósł organicznie — przeprojektowanie, połączenie biblioteki komponentów lub CSS wyciągnięty z narzędzia projektowego — gdzie ten sam błękit skończy się napisany kilkunastoma nieco innymi sposobami.
Opcja nazewnictwa określa, jak każda zmienna jest nazwana: według kolejności pierwszego pojawienia się (--color-1, --color-2…), według przybliżonego tonu i jasności (--color-dark-blue, --color-light-gray) lub według właściwości, w której się najpierw pojawiła (--color-background, --color-border). Włącz opcję "Scal identyczne kolory zapisane inaczej", aby połączyć #ff0000, rgb(255, 0, 0) i hsl(0, 100%, 50%) w jedną zmienną, nawet jeśli tekst źródłowy różni się; identyczne wartości są zawsze łączone niezależnie. Suwak podobieństwa idzie dalej i łączy odcienie, które są bliske, ale nie identyczne — przydatne, gdy paleta gromadzi się niemal duplikatami szarości lub błękitów, których nikt nie zamierzał utworzyć. Wybierz, czy wygenerowany blok znajduje się pod :root czy niestandardowym selektorem, wybierz notację, w której drukują się zmienne, lub przełącz się na zwykłą listę kolorów i liczbę występień, jeśli chcesz tylko audyt zamiast przepisania.
Skaner patrzy tylko na rzeczywiste wartości deklaracji, dlatego nigdy nie myli selektora ID takiego jak #abcabc z kolorem i całkowicie nie zmienia komentarze, cytowane łańcuchy i zawartość url(). Działają okna i końce linii Uniksa, a narzędzie nie jest mąci przez zagnieżdżone funkcje, takie jak kolor na liście gradientów.
Wszystko działa lokalnie w Twojej przeglądarce — Twój arkusz stylów nigdy nie zostanie nigdzie wysłany, więc bezpiecznie jest wkleić kod z prywatnego projektu. Skopiuj wynik, pobierz go jako plik .txt lub wyślij wynik z powrotem do danych wejściowych, aby go dopracować innym przejściem.