LiveStyle是Chrome中提高开发效率的一款CSS编辑器插件。利用LiveStyle和Sublime Text3编辑器结合可实现可视化开发，一次配置，简单易用！

本文由前端交流QQ群管理员——訫♂染提供！特此感谢。

LiveStyle官方网站：http://livestyle.emmet.io/

LiveStyle和Sublime Text3配置说明

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

二、下载Sublime Text3编辑器

点击下载Sublime Textile3

说明：本站安装包已经集成 emmet 插件，下载完成后解压Sublime Text3就可以使用了，本站提供的为绿色文件包，无须安装。

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

四、打开已经安装好的Sublime Text3，到Chrome里查看已经自动挂接上Sublime了。

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

此时在Chrome代码查看器中编辑您的CSS，即可同步到您在Sublime Text中打开的CSS文件中。或者在Sublime Text中编辑您的CSS也可义在浏览器中同步显示页面效果！

Chrome插件LiveStyle结合Sublime Text3编辑器实现高效可视化开发的更多相关文章

  1. Sublime Text3编辑器简介

    Sublime Text3编辑器简介 下载地址 绿色中文版v3.3038下载地址:http://www.cncrk.com/downinfo/60832.html 官方网址(英文安装版)下载地址:ht ...

  2. Sublime text3的安装以及python开发环境的搭建

    作者:struct_mooc 博客地址:https://www.cnblogs.com/structmooc/p/12376601.html 一. Sublime text3的安装 1.sublime ...

  3. Python3.7解释器+sublime Text3编辑器+案例打包软件+Python语言程序设计基础教材

    编辑器:https://nsyw.lanzous.com/i7lcdyh Python3.7 https://nsyw.lanzous.com/i7a299c 案例 https://nsyw.lanz ...

  4. Sublime Text3下如何快速搭建开发环境

    安装好Sublime Text3之后,简单几步就可以搭建一个好用的开发环境. sublime的设置包括自定义设置以及插件系统. 打开菜单Preferences -> Settings,编辑自定义 ...

  5. Sublime text3的安装及python开发环境的搭建

    作者:struct_mooc 博客地址:https:////www.cnblogs.com/structmooc/p/12376592.html 一. Sublime text3的安装 1.subli ...

  6. Sublime Text3 配置 Lua5.3.5开发环境

    所需软件 Sublime Text3 Lua5.3.5 配置过程 解压Lua5.3.5包 官方下载的包内是需要makefile安装的(博主Win10下暂为实现),此处提供自动配置完毕的包:Lua5.3 ...

  7. Sublime Text3 编辑器我的最爱

    简介 Sublime Text 3是一个神奇的文本编辑器,适合程序员.作家.它有很多亮点功能,比如多选择.Go Anything.命令面板.多选择可以让你同时编辑多出代码,Got Anything 像 ...

  8. sublime text3 编辑器常用快捷键

    选择类 Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本. Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑.举个栗子:快速选中并更改所有相同的变量名.函数 ...

  9. sublime text3编辑器经常使用快捷方式

    1.简单语法的自己主动补全 preferences->setting user 输入例如以下代码,保存. { "auto_complete":true, "auto ...

随机推荐

  1. web前端开发分享-css,js入门篇

    学习没有捷径,但学习是有技巧与方法.   一,css入门篇:   推荐书籍:css哪些事儿,精通css. 理由:css那些事儿,他是一本介绍css基础类的书,是入门的经典读物. 系统的介绍了css的选 ...

  2. B1041. 考试座位号(15)

    这题比较简单,没有调试,一次通过,虽然简单,不过也有借鉴意义. #include<bits/stdc++.h> using namespace std; const int N=1005; ...

  3. MongoDB作为Windows服务来安装 错误1053：服务没有及时响应启动或控制请求

    这个问题我解决了一晚上,用尽了所有百度 博客上的方法,都是失败的 结果重新换了一种安装的方法 视频讲解  非常清楚 https://www.bilibili.com/video/av31240330? ...

  4. centos crontab 计划任务 设置与查看

    centos 上 crontab 计划任务 ,这个版本解释的比较清晰 林涛 发表于:2017-4-27 11:11 分类:26点 标签:crontab,Linux,计划任务 36次 这个版本的cron ...

  5. opencv2 用imwrite 抽取并保存视频图像帧

    最近在写一个车辆检测程序,程序中需要获取图像帧,并保存为图片,且放到指定目录中去,我在网上查了很多发现都是opencv1的有关操作,没有opencv2的操作,我参考网上的例子,结合着用opencv2新 ...

  6. 第一个spring冲刺总结及后诸葛亮报告（附团队贡献分）

    眨眼就完结了第一阶段的冲刺了,之前因为学校停电停水等诸多原因而导致冲刺完毕时间的推迟. 第一阶段总体是做到了运算的功能,只是一些基本的功能实现,但能保证的容错性能较高. 1.在普遍的四则运算中都能见到 ...

  7. iptables之四表五链

    iptables可谓是SA的看家本领,需要着重掌握.随着云计算的发展和普及,很多云厂商都提供类似安全组产品来修改机器防火墙. iptables概念 iptables只是Linux防火墙的管理工具而已. ...

  8. Python面向对象高级编程：@property--把方法变为属性

    为了限制score的范围,可以通过一个set_score()方法来设置成绩,再通过一个get_score()来获取成绩,这样,在set_score()方法里,就可以检查参数: >>> ...

  9. 微信小游戏 项目配置文件 project.config.json

    一.项目配置文件project.config.json 小程序开发者工具在每个项目的根目录都会生成一个 project.config.json,在工具上做的任何配置都会写入到这个文件,当重新安装工具或 ...

  10. js保留两位小数方法总结

    js保留两位小数方法总结 最近在做结算系统,经常需要用到金额保留两位小数,刚开始我一直用的是Angular中的过滤器number |2,但是,这无法满足我的需求.问题是,当用户离开文本框时,我需要将用 ...