Jakiś czas temu pisałem o jednym z dodatków, bez którego nie mogę sobie wyobrazić pisania jakiegokolwieg dokumentu HTML, czyli Emmet. Jego autor stworzył właśnie kolejny plugin, który tym razem umożliwia nam edycję CSS z podglądem na żywo, czyli Emmet LiveStyle. Oczywiście ktoś zapyta, po co komu kolejne tego typu narzędzie skoro mamy już np. LiveReload, CodeKit czy Bracket?
Dlaczego jest to lepsze?
Wszystko rozchodzi o sposób w jaki to narzędzie działa. Emmet LiveStyle nie wymusza na nas trzymania wszystkich plików lokalnie. Tak naprawdę on w ogóle nie interesuje się tym gdzie dany plik się znajduje, a zmiany wprowadza poprzez powiązany edytor tekstu (na razie jest to niestety tylko Sublime Text). Dzięki temu edytowany plik CSS wcale nie musi być tym samym, który jest wykorzystywany w przeglądarce. Idąc dalej, również nowo utworzony i niezapisany plik możemy powiązać z Emmet LiveStyle i wprowadzać w nim zmiany.
Narzędzie to dodatkowo działa w obie strony, a więc również zmiany wprowadzane w Chrome DevTools są przenoszone do edytora. Jedyne co nam zostaje to tylko zapisać taki plik. Wspomniany wyżej np. LiveReload już tego nie potrafi.
To oczywiście nie wszystko. Poniżej znajduje się demo przygotowane przez autora rozszerzenia pokazujące jak to działa. Warto zobaczyć.
Na koniec, Emmet LiveStyle nie radzi sobie niestety z preprocesorami CSS takimi jak np. LESS, SASS, SCSS. Autor jednak zapewnia, że jest szansa by to uzyskać. Na razie zostaje nam jednak używanie np. CodeKit.
