Emmet LiveStyle 介绍和使用方法

想必听到Emmet(原名：Zen coding)都不太会陌生，它是个能够帮助开发人员高效和快速编写HTML和CSS的插件。

而这次的Emmet LiveStyle，则是个提供“样式实时预览”插件，最大好处就是方便了我们对页面的调试。

不过Emmet LiveStyle目前处于公测阶段，暂时只支持Chrome和Safari浏览器与Sublime Text 2/3的双向修改。并且在官网中提到，它并免费使用，而是有偿使的，即正式版出来后会收费（但相信这个问题难不倒"天朝"...你懂的...）

Emmet LiveStyle的特点：
1. 即时更新（不会重新加载页面，样式修改以后无需保存也能预览)；；
2. 多个页面同时预览（例：同时打开多个页面，并且关联到相同的CSS，此时修改该CSS，这些页面都能即时显示修改内容）；
3. 双向修改（在Chrome开发者工具和Sublime Text中，只要有一处修改，两个工具的样式都会更改。）
4. 便捷的安装和使用。

为了有个更直观的认识，建议大家还是看下官方的演示视频

安装Subliem Text插件：
1. 打开命令面板：ctrl + shift + p
2. 输入：install Package
3. 搜索：LiveStyle
注：LiveStyle和Emmet一样，需要PyV8插件的支持。建议先安装Emmet，因为安装Emmet的同时会自动安装PyV8。

安装浏览器扩展程序：
可以在Chrome网上应用商店中搜索"Emmet LiveStyle"

使用方法：
1. Sublime Text中打开该页面的CSS文件。如果是远程修改，可以新建个CSS文件(例：debug.css)。
2. 打开需要调试的页面，按F12(打开开发者工具)，选择LiveStyle(在Console/控制台右边)。
3. 把Enable LiveStyle for current page前面的勾打上。
4. 选择对应的样式，即关联CSS。
注：此时Chrome的Matched CSS Rules和Sublime Text的修改都会双向同步。

官方网站：http://livestyle.emmet.io/