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

Use tools. not rules.

今天发现一个很棒的利器：livestyle. livestyle是Emmet团队开发的。下面来说下怎么使用：

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

livestyle 安装

---

在 sublime text 中安装 livestyle 插件

QQ截图20160815182135.png
QQ截图20160815182218.png

安装chrome扩展

---

通过这个网址，安装livestyle，如果打不开，可能需要准备梯子，你懂的~ 感谢裆~
安装后，在 chrome 中按 F12 打开DevTools就可以看到在 console 后面多了个 LiveStyle 面板。

QQ截图20160815182837.png
QQ截图20160815182401.png

使用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文件中

到这个时候，其实你还不能成功，因为还缺少了一个软件。LiveStyle点击下载

QQ截图20160815182703.png