Chrome插件LiveStyle结合Sublime Text3编辑器实现高效可视化开发
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编辑器
说明：本站安装包已经集成 emmet 插件，下载完成后解压Sublime Text3就可以使用了，本站提供的为绿色文件包，无须安装。
三、用Chrome打开需要编辑的地址，右键点击查看网页元素,可看到下图。
四、打开已经安装好的Sublime Text3，到Chrome里查看已经自动挂接上Sublime了。
在sublime Text 中打开一个 css 文档。回到浏览器查看并设置同步
此时在Chrome代码查看器中编辑您的CSS，即可同步到您在Sublime Text中打开的CSS文件中。或者在Sublime Text中编辑您的CSS也可义在浏览器中同步显示页面效果！
Chrome插件LiveStyle结合Sublime Text3编辑器实现高效可视化开发的更多相关文章
- Sublime Text3编辑器简介
Sublime Text3编辑器简介 下载地址 绿色中文版v3.3038下载地址:http://www.cncrk.com/downinfo/60832.html 官方网址(英文安装版)下载地址:ht ...
- Sublime text3的安装以及python开发环境的搭建
作者:struct_mooc 博客地址:https://www.cnblogs.com/structmooc/p/12376601.html 一. Sublime text3的安装 1.sublime ...
- Python3.7解释器+sublime Text3编辑器+案例打包软件+Python语言程序设计基础教材
编辑器:https://nsyw.lanzous.com/i7lcdyh Python3.7 https://nsyw.lanzous.com/i7a299c 案例 https://nsyw.lanz ...
- Sublime Text3下如何快速搭建开发环境
安装好Sublime Text3之后,简单几步就可以搭建一个好用的开发环境. sublime的设置包括自定义设置以及插件系统. 打开菜单Preferences -> Settings,编辑自定义 ...
- Sublime text3的安装及python开发环境的搭建
作者:struct_mooc 博客地址:https:////www.cnblogs.com/structmooc/p/12376592.html 一. Sublime text3的安装 1.subli ...
- Sublime Text3 配置 Lua5.3.5开发环境
所需软件 Sublime Text3 Lua5.3.5 配置过程 解压Lua5.3.5包 官方下载的包内是需要makefile安装的(博主Win10下暂为实现),此处提供自动配置完毕的包:Lua5.3 ...
- Sublime Text3 编辑器我的最爱
简介 Sublime Text 3是一个神奇的文本编辑器,适合程序员.作家.它有很多亮点功能,比如多选择.Go Anything.命令面板.多选择可以让你同时编辑多出代码,Got Anything 像 ...
- sublime text3 编辑器常用快捷键
选择类 Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本. Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同文本进行同时编辑.举个栗子:快速选中并更改所有相同的变量名.函数 ...
- sublime text3编辑器经常使用快捷方式
1.简单语法的自己主动补全 preferences->setting user 输入例如以下代码,保存. { "auto_complete":true, "auto ...
随机推荐
- EOS开发基础之三：使用cleos命令行客户端操作EOS——关于钱包wallet和账户account
好了,上一节我们已经讲了关于wallet的一些基础操作,基本了解了怎么去创建一个钱包,怎么去查看钱包.上锁和解锁钱包等,这一节咱们就来开始操作账户account吧. 上一节讲到了每一个account都 ...
- M1阶段事后分析
M1阶段的开发结束了,在周四的课上我们组也进行了alpha阶段的汇报.我们的努力得到了应有的回报,下面我们将针对M1阶段产生的一些问题进行分析和反思. 一.设想和目标 1.我们的app更像是一款针对北 ...
- someday团队Postmortem（事后诸葛亮会议）
一.会议相关介绍: 时间:2018年1月12日 地点:第九实验楼五楼机房 参会人员:someday团队全体成员 二.每个成员在beta阶段的实践和alpha阶段有何改进? (一)设想和目标: 我们的软 ...
- DirectoryEntry_Properties属性的遍历(win2008)
DirectoryEntry root = new DirectoryEntry(@"IIS://localhost/W3SVC"); string PInfo = "& ...
- Vue 和 angular
vue适合移动端的项目,而angular更适合运用于Pc端的项目.
- php 有意思的小题
/** * 你的是一个数字和一个字符串进行比较,PHP会把字符串转换成数字再进行比较.* PHP转换的规则的是:若字符串以数字开头,则取开头数字作为转换结果,若无则输出0.***/1)$a =”abc ...
- vue 请求后台数据 （copy）
https://www.cnblogs.com/calledspeed001/p/7094494.html var that=this get请求 that.$http.get("1.txt ...
- Docker一些常用命令
1.启动Docker服务 service docker start 2.查看所有镜像 docker images 3.查看正在运行的容器 docker ps 4.查看所有容器 docker ps -a ...
- 【刷题】BZOJ 4078 [Wf2014]Metal Processing Plant
Description 定义集合S的价值D(S)为: 现在给你n个元素,并给出其中任意两个元素之间的d(i,j)值 要你将这些元素划分成两个集合A.B. 求min{D(A)+D(B)}. 注:d(i, ...
- 学习7__STM32--SPI外设之双机通信---
<target> # 整透stm32之spi双机通信(包括双机同为stm32,stm32& others) <概念> # 双机通信(全双工) 在主机的MOSI管脚输出1 ...