堂Di

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

LiveStyle是Chrome中提高开发效率的一款CSS编辑器插件。利用LiveStyle和Sublime Text编辑器(经测试ST2 ST3均可以支持)结合可实现可视化开发,一次配置,简单易用! LiveStyle官方网站:http://livestyle.emmet.io/ LiveStyle和Sublime Text配置说明

 

一、安装并启动Chrome浏览器,进入Chrome APP站点:https://chrome.google.com/webstore/category/apps  搜索:LiveStyle可以看到下图并点击安装启用

二、下载Sublime Text编辑器

下载编辑器并安装Emmet LiveStyle插件

当然,Emmet(即之前的zendcoding)这个这么好用的插件也是必装的

关于安装就不再多说了 st2可以看http://www.cnblogs.com/cuoreqzt/archive/2013/01/07/2848975.html

三、用Chrome打开需要编辑的地址,右键点击查看网页元素,可看到下图。

四、打开已经安装好的Sublime Text3,到Chrome里查看已经自动挂接上Sublime了。(显示的是当前st的版本 如果是2就显示st2 3就显示st3,显示no active editor的话。。。。你应该先安装st并打开。。。)

在sublime Text 中打开一个 css 文档。回到浏览器查看并设置同步

此时在Chrome代码查看器中编辑您的CSS,即可同步到您在Sublime Text中打开的CSS文件中。

或者在Sublime Text中编辑您的CSS也可义在浏览器中同步显示页面效果!这并不需要保存,只要修改就可以立刻看到效果,比F5软件好用多了。。。(其实我是因为没钱买F5,又忍受不了F5隔一会的“温馨提示”。。⊙﹏⊙b汗)

posted on 2013-09-26 11:30  堂Di  阅读(3875)  评论(1编辑  收藏  举报