Urejanje CSS-jev v brskalniku s CSS George

Si kdaj želela neposredno urejanje v brskalniku, ne da bi se preklopili nazaj na datoteke CSS? Ena od rešitev so orodja za razvijalce Chrome, vendar nekateri razvijalci raje preprostejši potek dela.

Tukaj CSS George vstopi. To brezplačno orodje za urejanje v brskalniku dela na vrhu LESS in ga sproži a preprosta datoteka JavaScript.

Večina razvijalcev raje a urejevalnik v brskalniku ker vsi ne uporabljajo predkompilatorja LESS. Toda CSS George deluje v okolju LESS ki se lahko hitro namesti prek npm.

Če imate nameščen npm, lahko zaženete to preprosto kodo dodaj izvorne datoteke do vašega trenutnega projekta:

 npm namestitev --save-dev css-george 

Ali pa lahko potegnite George.js mapa od GitHub, kjer je gostila skupaj z vsemi drugimi izvornimi datotekami. Celoten projekt je brezplačen in odprtokoden, tako da lahko prenesite celotno kopijo če ne želite uporabljati npm.

Z .js Datoteka, dodana v glavo strani, lahko začnete izvrševanje funkcij Georgea v brskalniku. Za odprite okno urejevalnika, kliknite tipko tilda, ki je dostopna iz Shift + ', ki se nahaja v zgornjem levem kotu večine tipkovnic. A novo okno prikazati se mora nekako takole:

Na tem zaslonu lahko uredite spremenljivke LESS uporablja se za vse, od barv do velikosti pisav ali družine pisav.

Tukaj je LESS plugin postane nujnost ker moraš povedati CSS George katere spremenljivke je treba vključiti. Ko so postavljeni, lahko samo odprite urejevalnik brskalnikov CSS George in pojdi v mesto.

Upam, da je očitno, da je to orodje ne bi smel vključiti med izvajanjem. Razen če izrecno ne želite dovoliti obiskovalcem uredite barvo in slog strani, kar na splošno ni dobra ideja. Ampak za lokalno testiranje, CSS George je redko orodje, ki ponuja pripomoček za vse razvijalce frontendov.

Ti lahko videl je v živo na predstavitveni strani CSS George ali prenesite celotno kopijo preko npm ali iz replike GitHub.