Upravte svoje návrhy CSS v prehliadači pomocou služby CSS George

Už ste niekedy chceli vykonať priame úpravy vo vašom prehliadači bez prepínania späť na vaše CSS súbory? Jedným z riešení sú Nástroje pre vývojárov Chrome, ale niektorí vývojári preferujú jednoduchší pracovný tok.

To je kde CSS George príde zadarmo nástroj na úpravu v prehliadači práce na začiatku LESS a je iniciovaný a jednoduchý súbor JavaScript.

Väčšina vývojárov uprednostňuje editora založeného na prehliadači pretože nie každý používa predkompilátor LESS. Ale CSS George beží v prostredí LESS ktoré je možné nainštalovať rýchlo cez npm.

Ak máte npm nainštalovaný, môžete tento jednoduchý kód spustiť pridajte zdrojové súbory do vášho aktuálneho projektu:

 npm nainštalujte --save-dev css-george 

Alebo môžete vytiahnite George.js súbor od GitHub, kde je hosťovaný spolu so všetkými ostatnými zdrojovými súbormi. Celý projekt je bezplatný a open source, takže môžete stiahnuť úplnú kópiu od GitHub, ak nechcete používať npm.

S .js súbor pridaný do hlavičky vašej lokality, môžete začať vykonávanie funkcií George priamo z prehliadača. na otvorte okno editora, kliknite na tlačidlo tilde, ktoré je prístupné z klávesov Shift + 'v ľavom hornom rohu väčšiny klávesníc. nové okno by sa malo objaviť, že vyzerá takto:

Z tejto obrazovky môžete upraviť menšie premenné používa sa pre všetko od farieb po veľkosti písma alebo rodiny písiem.

Toto je miesto, kde je plugin LESS stáva sa nevyhnutnosťou pretože musíte povedať CSS George ktoré premenné majú byť zahrnuté. Akonáhle sú nastavené, môžete to spraviť otvorte editor prehliadača CSS George a choďte do mesta.

Dúfam, že je zrejmé, že tento nástroj nemal by byť súčasťou behu. Ak nechcete nechať návštevníkov konkrétne upravovať farbu a štýl stránky, čo všeobecne nie je dobrý nápad. Ale pre miestne testovanie, CSS George je zriedkavý nástroj, ktorý ponúka nástroj pre všetkých vývojárov frontend.

Môžeš vidieť to naživo na demo stránke CSS George, alebo stiahnuť úplnú kópiu cez npm alebo z repo GitHub.