Edytuj swoje projekty CSS w przeglądarce za pomocą CSS George

Czy kiedykolwiek chciałeś dokonywać bezpośrednich edycji w przeglądarce bez przełączania z powrotem na pliki CSS? Jednym z rozwiązań jest Chrome Developer Tools, ale niektórzy deweloperzy wolę prostszy przepływ pracy.

To tam gdzie CSS George wchodzi. To za darmo narzędzie do edycji w przeglądarce Prace na szczycie LESS i jest inicjowany przez prosty plik JavaScript.

Większość programistów preferuje edytor oparty na przeglądarce ponieważ nie wszyscy używają prekompilatora LESS. Ale CSS George działa w środowisku MNIEJSZYM które można szybko zainstalować przez npm.

Jeśli masz zainstalowany npm, możesz uruchomić ten prosty kod na dodaj pliki źródłowe do aktualnego projektu:

 npm install --save-dev css-george 

Albo możesz ciągnąć George.js plik z GitHub, gdzie znajduje się obok wszystkich innych plików źródłowych. Cały projekt jest darmowy i otwarty, więc możesz pobierz pełną kopię z GitHub, jeśli nie chcesz używać npm.

Z .js plik dodany do nagłówka witryny, możesz zacząć wykonywanie funkcji George'a bezpośrednio z przeglądarki. Do otwórz okno edytora, kliknij klawisz tyldy, który jest dostępny z Shift + 'znajdujący się w lewym górnym rogu większości klawiatur. ZA nowe okno powinien wyglądać mniej więcej tak:

Z tego ekranu możesz edytuj zmienne LESS używany do wszystkiego, od kolorów po rozmiary czcionek i rodziny czcionek.

To jest wtyczka LESS staje się koniecznością ponieważ musisz powiedzieć CSS George'owi które zmienne należy uwzględnić. Po skonfigurowaniu możesz po prostu otwórz edytor przeglądarki CSS George i idź do miasta.

Mam nadzieję, że to oczywiste, że to narzędzie nie powinieneś być włączone w czasie wykonywania. Chyba że specjalnie chcesz pozwolić odwiedzającym edytuj kolor i styl strony, co zazwyczaj nie jest dobrym pomysłem. Ale dla lokalne testy, CSS George to rzadkie narzędzie, które oferuje narzędzia dla wszystkich programistów frontendowych.

Możesz zobacz to na żywo na stronie demonstracyjnej CSS George lub pobierz pełną kopię przez npm lub z repozytorium GitHub.