您好,欢迎来到伴沃教育。
搜索
您的当前位置:首页使用 livestyle 和 chrome 实现双向样式修改

使用 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扩展

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文件中
QQ截图20160815182703.png

Copyright © 2019- bangwoyixia.com 版权所有 湘ICP备2023022004号-2

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务