Emmet LiveStyle的使用介绍

今天无意中看到一个sublime的插件LiveStyle,了解了之后才知道它是如此的强大。想必前端er都知道Emmet这个神插件,没错,LiveStyle也是Emmet团队出品的,它的全称是Emmet LiveStyle,我们可以先看一下官方的演示视频。那么接下来就介绍如何安装和使用这个插件。

一、Chromesublime中安装LiveStyle

想必这个就不需要多讲了,可以翻墙的直接在商店搜索安装,不能的可以点击这里下载,然后打开chrome的“扩展程序”,接着把插件拖进去即可安装。

BaiduShurufa_2015-6-9_11-5-27.png

  sublime直接在install package安装就行了。提醒一点,Livestyle需要PyV8的支持,建议安装之前先安装好Emmet

二、使用

chromesublime安装成功之后就可以使用了。打开chrome的开发者工具,在console的右边多了个LiveStyle,如下图:

BaiduShurufa_2015-6-9_11-1-56.png


接下来为当前页启用页面启用LiveStyle,勾选Enable LiveStyle for current page,选择页面对应的css文件即可。

BaiduShurufa_2015-6-9_11-2-11.png

 

最后就可以进行同步的操作了,解放你的ctrl+sf5吧,下面我录制了两个gif动图来测试LiveStyle的双向同步操作,简直碉堡了,双屏更爽。

1.gif

2.gif