CSS-färgvariabel-extraktor
Hitta alla färger i din CSS och omvandla dem till återanvändbara anpassade egenskaper.
CSS-färgvariabel-extraktor
Klistra in ett formatmallar och detta verktyg genomsöker varje deklaration för färgvärden skrivna som hex, rgb()/rgba() eller hsl()/hsla(), och skriver sedan om reglerna så att de refererar till anpassade egenskaper istället för att upprepa samma värde överallt. Det är byggt för att rensa upp en formatmall som växte organiskt – en omdesign, en slags bibliotek sammanslagning eller CSS från ett designverktyg – där samma blå hamnar skrivet på ett dussin något olika sätt.
Alternativet för namngivning styr hur varje variabel namnges: efter ordning för första förekomst (--color-1, --color-2…), efter ungefärlig färgton och ljusstyrka (--color-dark-blue, --color-light-gray) eller efter egenskapen den först hittades på (--color-background, --color-border). Slå på "sammanfoga samma färger skrivna på olika sätt" för att vika #ff0000, rgb(255, 0, 0) och hsl(0, 100%, 50%) i en enda variabel även om källtexten skiljer sig åt; identiska värden är alltid sammanslagna oavsett. Likhetsskjutreglaget går vidare och sammanfogar nyanser som är nära men inte identiska – användbart när en palett har samlat nästan dubbletter av gråtoner eller blåtoner som ingen avsiktligt skapade. Välj om det genererade blocket sitter under :root eller en anpassad väljare, välj notationen variablerna skrivs ut i, eller växla till en enkel lista över färger och förekomsttäljare när du bara vill ha en granskning istället för en omskrivning.
Skannern tittar bara inuti faktiska deklarationsvärden, så det blandar aldrig en ID-väljare som #abcabc med en färg, och det lämnar kommentarer, citerade strängar och url()-innehål helt orört. Både Windows och Unix-radavslutningar fungerar, och verktyget lurar inte av kapslade funktioner som en färg inuti en gradient-lista.
Allt körs lokalt i din webbläsare – ditt formatmallar laddas aldrig upp någonstans, så det är säkert att klistra in kod från ett privat projekt. Kopiera resultatet, ladda ner det som en .txt-fil eller skicka utmatningen tillbaka till inmatningen för att förfina den med ännu en passage.