Ugrás a tartalomhoz
100% helyi

CSS szín változó kinyerő

Kinyerje minden színt CSS-éből és alakítsa újrafelhasználható custom propertyivé.

Bemenet
0
Kimenet

CSS szín változó kinyerő

Illessze be stíluslapját, és ez az eszköz minden deklarációban megkeresi a hex, rgb()/rgba() vagy hsl()/hsla() formátumban írt színértékeket, majd az szabályokat átírja custom propertyk referenciájára az értékek megismétlése helyett. Ez organikusan nőtt stíluslapok tisztítására készült — átdolgozás, komponenskönyvtár-egyesítés vagy tervezőeszközből kinyert CSS esetén, ahol ugyanaz a kék tucatféleképpen, kissé eltérő módon végzi.

A névadási lehetőség vezérli, hogy minden változó hogyan legyen elnevezve: első megjelenési sorrend szerint (--color-1, --color-2…), megközelítő árnyalat és világosság szerint (--color-dark-blue, --color-light-gray), vagy az első megjelenés CSS tulajdonsága szerint (--color-background, --color-border). Kapcsolja be az "azonos szín egyesítését eltérő formátumban" az #ff0000, rgb(255, 0, 0) és hsl(0, 100%, 50%) egyetlen változóba összehajtogatásához, még ha a forrásszöveg eltér is; azonos értékek mindig egyesülnek függetlenül attól. A hasonlósági csúszka tovább megy, és egyesít árnyalatokat, amelyek csak közel azonosak, de nem azonosak — hasznos, ha a paletta szürke vagy kék közeli-duplikálódásokat halmozott fel, amelyeket senki sem szándékolt létrehozni. Válassza, hogy a generált blokk :root vagy egyéni választó alatt legyen, válassza ki a jelölést, amelyben a változók nyomtatódnak, vagy váltson egyszerű szín- és előfordulási számlálólista formátumra, ha csak a stíluslap átírása helyett auditot szeretne.

A szkenner csak az aktuális deklarációs értékeken belül néz, ezért soha nem téveszti össze az #abcabc-hez hasonló azonosító választót egy színnel, és kommentárokat, idézőjeles karakterláncokat és url() tartalmat teljes egészében érintetlenül hagyja. Windows és Unix sorelágazások is működnek, és az eszköz nem sakkban van a beágyazott függvények által, például egy szín egy gradiens lista belsejében.

Minden helyileg futtatódik az Ön böngészőjében — a stíluslapot soha nem töltik fel sehova, így biztonságos beilleszteni egy privát projektből származó kódot. Másolja ki az eredményt, töltse le .txt fájlként, vagy küldje vissza a kimenetet a bemenetbe, hogy finomítsa egy másik passzal.

Gyakori kérdések

Milyen szín formátumokat ismer fel?
Hex (#rgb, #rgba, #rrggbb, #rrggbbaa), rgb()/rgba() és hsl()/hsla(), vesszővel és szóközzel egyaránt szintaxis. Az olyan elnevezett színek, mint a "red" nem egyeznek.
Mi számít "ugyanannak a színnek" az egyesítéshez?
Bájt-azonos értékek mindig egyesülnek. Az ekvivalencia lehetőség bekapcsolása ugyanazt a színt más jelölésben is egyesíti (hex vs rgb vs hsl). A hasonlósági csúszka tovább megy, és csak közeli árnyalatokat egyesít, az átlagos csatorna különbsége alapján, amelyet Ön irányít.
Hogyan vannak az új változó nevek kiválasztva?
Első megjelenési sorrend szerint, megközelítő árnyalat és világosság név szerint, vagy az első megtalált CSS tulajdonság szerint — az Ön választása. Az ütközés számszerű utótagot kap.
Megérinti a színeket megjegyzéseken, sztringeken vagy url()-on belül?
Nem. Csak az aktuális deklarációs értékeken belüli színek egyeznek — megjegyzéseken, tárgyalt sztringeken és url(...) belüli szöveg pontosan az írott módon marad.
A CSS-em valahová feltöltésre kerül?
Nem. A kinyerés teljes egészében az Ön böngészőjében fut — a stíluslap soha nem hagyja el az eszközöket.