想必听到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/