Emmet Live Style 加減用啦~

livereload for Windows因為是測試版，經常性的有問題，有時候還會不能使用，這時候可以試試Emmet LiveStyle，他主要會針對CSS的部分直接reload。來看看官方的影片吧。

安裝

http://livestyle.emmet.io/install/

安裝流程都是參考官方文件。而這是Sublime Text的擴充功能，所以一定要用Sublime Text，流程如下：

1. 安裝Package Control
2. 安裝LiveStyle 擴充功能
3. 安裝Chrome的 LiveStyle 擴充功能
4. 使用LiveStyle

安裝Package Control

這部分只要開啟Sublime Text，按下ctrl+`並且貼上以下的code即可。

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

原諒我這段，這邊我懶得重裝了…，所以沒有圖。

安裝LiveStyle 擴充功能

在Sublime Text上方的Preferences下找到Package Control。

選擇：Install Package

接下來輸入LiveStyle，就能安裝LiveStyle擴充功能

安裝Chrome的 LiveStyle 擴充功能

打開這個網址
Chrome Emmet LiveStyle，再加入倒Chomre就可以了。

使用 LiveStyle

Chrome的擴充元件，放在開發者工具裡，只要按下F12，就能看到開發者工具，找到LiveStyle並
Enable LiveStyle for current page。

接下來開啟正在做的檔案(直接開就可以了)

修改CSS，不需要存檔，就會發現畫面上的CSS效果跟著改變囉。