如何优雅地使用SublimeText3_html/css_WEB-ITnose

多元素操作符*

使用后跟数字，生成对于数量的元素ul>li*5生成。

分组操作符()

使用括号分组完成复杂的逻辑div>(div>ul>li*2>a)*2+footer>p生成

id和class生成

使用类似css中id和class的语法，可以为元素添加所需属性如div#header+div.cls1.cls2生成。

自定义属性

使用类似CSS中[attr]的语法添加自定义属性td[title="Hello" colspan=3]生成。

元素编号$

使用*生成多个元素的时候，可以使用$进行编号ul>li.item$*5生成。

{}添加文本

ul>(li{item $})*3生成。

 
item 1
 
item 2
 
item 3

Sublime Text Markdown Preview

sublimetext-markdown-preview是Sublime Text的一个Markdown预览插件，有了它就可以轻松使用Sublime Text编辑Markdown文档了。

使用Package Control安装

1. 如果没有安装过Package Control，先安装；
2. 按快捷键Ctrl + Shift + p打开命令窗口；
3. 在命令窗口中执行Package Control: Install Package；
4. 选择Markdown Preview并进行安装。

手动安装

1. 在菜单中选择Preferences > Browse Packages...；
2. 在弹出的资源管理器中向上一个目录，然后进入到Installed Packages/目录；
3. 下载sublimetext-markdown-preview压缩包到Installed Packages/目录下并重命名为Markdown Preview.sublime-package；
4. 重启Sublime Text.

预览Markdown文件

1. 打开Markdown文件；
2. 快捷键Ctrl + Shift + p，在控制窗口中输入Markdown Preview；
3. 此时有多个选项可选，一般选择Markdown Preview: Preview in Browser；
4. 此时要求选择解析器，任选一个即可；
5. Sublime Text在默认浏览器中打开Markdown解析后的html文件，有时候只是在新选项卡中打开了html文件，可以右键：copy file path,然后到浏览器中访问即可。

sublime-autoprefixer

sublime-autoprefixer根据Can I Use数据库信息为CSS样式添加适当的厂商前缀，也可以自定义需要添加前缀的浏览器版本。

sublime-autoprefixer只对CSS起作用，不处理Sass或者LESS之类的预处理格式。

使用Package Control安装sublime-autoprefixer

1. 快捷键Ctrl + Shift + p然后控制台输入Package Control: Install Package
2. 在弹出窗口中输入Autoprefixer，安装，重启Sublime Text

使用autoprefixer

1. 支持整个css文件添加前缀，也可选中部分cas代码添加前缀；
2. 快捷键Ctrl + Shift + p，输入Autoprefix CSS回车。

使用BracketHighlighter高亮括号配对

高亮括号配对在查找时很方便。

使用Package Control安装BracketHighlighter

1. 如果没有Package Control，先安装；
2. 快捷键Ctrl + Shift + p，在控制窗口中输入Package Control: Install Package；
3. 在控制窗口中输入BracketHighlighter并选择安装；
4. 安装完成。

auto-save自动保存修改

这个插件在1秒没有按键时会自动保存。个人感觉太频繁，可根据需求选择也可以启动sublime text的自动保存功能：

菜单： Sublime Text -> Preferences -> Settings - user

在配置文件中加上： "save_on_focus_lost": true这样当前文档失去焦点时会自动保存。

quoteHTML将HTML拼接为js字符串

作者：德淸文章源自：http://qiudeqing.com/tools/2015/05/31/sublime-text-3.html