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. 便捷的安装和使用。

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

1

安装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/

Categories: css技巧, CSS设计, 学习与阅读, 实用知识点, 工作记录, 经验分享, 网址分享, 设计前沿

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>