1. LiveStyle for Vim
Quick start
2013/08/24 - kanazawa.rb meetup 12

2. Emmet LiveStyle
http://livestyle.emmet.io/
"Instant updates: see changes as-you-type.
No file saving, no page reloading."

3. Demo Movie
http://www.youtube.com/watch?v=iQLhGbkupS4

4. Quick start
http://livestyle.emmet.io/usage/
"1. Install “LiveStyle” plugin from Package Control in
Sublime Text."

5. Quick start
http://livestyle.emmet.io/usage/
"1. Install “LiveStyle” plugin from Package Control in
Sublime Text."

8. LiveStyle for Vim
https://github.com/mattn/livestyle-vim

9. LiveStyle for Vim
https://github.com/mattn/livestyle-vim
http://mattn.kaoriya.net/
mattn_jp

10. LiveStyle for Vim
http://mattn.kaoriya.net/
mattn_jp
https://github.com/mattn/livestyle-vim
also Emmet.vim
http://mattn.github.io/emmet-vim/

11. Quick start for Vim

12. Quick start for Vim
Vim
livestyle-vim
livestyled (included in livestyle-vim)
Google Chrome
LiveStyle Extension

13. Quick start for Vim
Vim
livestyle-vim
livestyled (included in livestyle-vim)
Google Chrome
LiveStyle Extension

14. livestyle-vim
Vundle.vim
Bundle 'mattn/livestyle-vim'
NeoBundle.vim
NeoBundle 'mattn/livestyle-vim'

15. Quick start for Vim
Vim
livestyle-vim
livestyled (included in livestyle-vim)
Google Chrome
LiveStyle Extension

16. livestyled
LiveStyle connection handling server
Compile required
${bundle_dir}/livestyle-vim/livestyled/livestyled.go

17. livestyled
LiveStyle connection handling server
Compile required
${bundle_dir}/livestyle-vim/livestyled/livestyled.go

18. Setup Go lang (osx)
$ brew install go

19. Setup depend libs (osx)
$ brew install mercurial
$ mkdir ~/.go
$ export GOPATH=~/.go
$ go get code.google.com/p/go.net/websocket

20. Compile livestyled
$ cd ${bundle_dir}/livestyle-vim/livestyled
$ go build livestyled.go

21. Quick start for Vim
Vim
livestyle-vim
livestyled (included in livestyle-vim)
Google Chrome
LiveStyle Extension

22. LiveStyle Extension
https://chrome.google.com/webstore/detail/emmet-
livestyle/diebikgmpmeppiilkaijjbdgciafajmg

23. LiveStyle Extension
https://chrome.google.com/webstore/
Search 'Emmet LiveStyle'

24. How to Use

25. Flow
Access site w/ Chrome
Open Developer tool (LiveStyle panel)
Launch Vim & livestyled
Bind css via LiveStyle panel
Edit Edit Edit

26. Flow
Access site w/ Chrome
Open Developer tool (LiveStyle panel)
Launch Vim & livestyled
Bind css via LiveStyle panel
Edit Edit Edit

27. Access site w/ Chrome

28. Flow
Access site w/ Chrome
Open Developer tool (LiveStyle panel)
Launch Vim & livestyled
Bind css via LiveStyle panel
Edit Edit Edit

29. Open Developer tool(LiveStyle Panel)

30. Open Developer tool(LiveStyle Panel)

31. Flow
Access site w/ Chrome
Open Developer tool (LiveStyle panel)
Launch Vim & livestyled
Bind css via LiveStyle panel
Edit Edit Edit

32. Launch Vim & livestyled

33. Launch Vim & livestyled

34. Launch Vim & livestyled

35. Launch Vim & livestyled

36. Flow
Access site w/ Chrome
Open Developer tool (LiveStyle panel)
Launch Vim & livestyled
Bind css via LiveStyle panel
Edit Edit Edit

37. Bind css via LiveStyle panel

38. Bind css via LiveStyle panel

39. Flow
Access site w/ Chrome
Open Developer tool (LiveStyle panel)
Launch Vim & livestyled
Bind css via LiveStyle panel
Edit Edit Edit

40. Edit Edit Edit

41. Edit Edit Edit

42. Caution

43. Restriction

44. Happy coding !!

45. "kanazawa.rb ?"

46. scss/sass supported

47. scss/sass supported
scss/sass command required
set ft=scss/sass
Heavy ...

48. Thank you
Tomokazu Kiyohara
http://github.com/kiyohara
http://facebook.com/tomokazu.kiyohara