利用livestyle和chrome实现双向样式修改

最近看老外的ppt,看到了句话:

Use tools. not rules!

所以今天介绍个利器:liveStyle,liveStyle是Emmet团队开发的,Emmet就是大名鼎鼎的zen coding啊。

其实在订阅的weekly里面早就介绍过livestyle,真正用起来还是看了上面老外的这个ppt,试用了下liveStyle,结果一下子就喜欢上了,如果你开发遇见了下面的问题就可以使用liveStyle了:

  1. 在chrome DevTools中修改了样式,想同步到css文件中
  2. 修改了css文件,不想刷新chrome,就可以实时看到效果

嗯,livestyle解决了这两个问题,提高了开发效率!

livestyle安装

安装sublime text的liveStyle插件

package control搜索livestyle就可以了,或者去官方下载

安装chrome扩展

通过这个网址,安装livestyle,如果打不开,可能需要准备梯子,你懂的~ 感谢裆~

安装后,在chrome中按F12打开DevTools就可以看到在console后面多了个LiveStyle面板。

使用livestyle

  1. 用sublime text 打开一个css文件,例如a.css
  2. 随便打开个网址,然后F12 切换到LiveStyle
  3. 选中Enable LiveStyle for current page,这时会把页面的所有css都列出来
  4. 选择一个需要替换的css,在下拉框中选择要替换掉的sublime打开的css文件,例如:a.css;或者点击add file按钮
  5. 这时候在sublime中修改a.css,就可以在chrome中实时看到效果;在chrome修改样式,也可以将修改同步到a.css文件中