Redaguokite savo CSS dizainą naršyklėje su CSS George

Ar kada nors norėjote atlikti tiesioginius pakeitimus naršyklėje nepersijungiant prie CSS failų? Vienas iš sprendimų yra „Chrome“ kūrėjų įrankiai, bet kai kurie kūrėjai pageidauja paprastesnės darbo eigos.

Štai kur CSS George Tai nemokama naršyklės redagavimo įrankis veikia virš LESS ir tai inicijuoja a paprastas „JavaScript“ failas.

Dauguma kūrėjų nori naršyklės redaktorius kadangi ne visi naudoja LESS išankstinį kompiliatorių. Bet CSS George veikia LESS aplinkoje kuri gali būti įdiegta greitai per npm.

Jei įdiegėte npm, galite naudoti šį paprastą kodą pridėti šaltinio failus į dabartinį projektą:

 npm įdiegti --save-dev css-george 

Arba galite ištraukite George.js failą iš „GitHub“, kur jis talpinamas šalia visų kitų šaltinių failų. Visas projektas yra nemokamas ir atviras šaltinis, kad galėtumėte atsisiųskite visą kopiją iš „GitHub“, jei nenorite naudoti „npm“.

Su .js failas, pridėtas prie jūsų svetainės antraštės, galite pradėti vykdant George'o funkcijas tiesiai iš naršyklės. Į atidarykite redaktoriaus langą, spustelėkite „tilde“ klavišą, kurį galima pasiekti iš „Shift +“, esančio viršutiniame kairiajame daugelio klaviatūros kampe. A naujas langas turėtų pasirodyti, kad atrodo taip:

Iš šio ekrano galite redaguoti LESS kintamuosius naudojami viskas nuo spalvų iki šrifto dydžio ar šriftų šeimų.

Čia LESS įskiepiai tampa būtinybe nes turite pasakyti CSS George'ui kokie kintamieji įtraukti. Sukūrę galite tiesiog atidarykite CSS George naršyklės redaktorių ir eikite į miestą.

Tikiuosi, kad tai akivaizdu neturėtų būti įtrauktas į vykdymo laiką. Nebent jūs konkrečiai norite leisti lankytojams redaguokite puslapio spalvą ir stilių, kuri paprastai nėra gera idėja. Bet vietiniai bandymai, CSS George yra retas įrankis, kuris siūlo naudingumą visiems „Frontend“ programuotojams.

Tu gali pamatyti jį gyventi CSS George demonstraciniame puslapyje arba atsisiųskite visą kopiją per „npm“ arba iš „GitHub“ repo.