今天逛 CSSDeck 时发现了一个 使用 CSS3 创建分布按钮教程 ，发现作者用了 CSS 选择器的语法，很简单地用 ul#menu>li*7>a 展开成下面的 html 代码，略显犀利：
1 | <ul id="menu"> |
作为一个 Sublime Text 党，我第一时间想到了 Zen Coding 插件可能提供这个功能，安装完后发现 Zen Coding 即将不受支持，作者建议用户使用 Emmet 作为替代。于是我又果断装了 Emmet 尝尝鲜。Emmet 对于前端工程师而言功能相当强大，而且支持众多 IDE 及编辑器，如 Eclipse, TextMate Komodo等等。这篇文章主要讲 Emmet 的提供的 缩写语义 支持。没有安装插件的童鞋也可以上 Emmet官网 点击 Watch Demo 使用 Emmet 提供的在线试用功能。
Emmet 的缩写语义提供了表示标签元素、标签间关系、标签属性的方便表示。
简单地使用标签的名字即可先成标签对。
1 | div => <div></div> |
>> 操作符表示嵌套元素，如
1 | div>ul>li will produce: |
++ 操作符表示 + 两端的元素是在同一层级：
1 | div+p+bq will produce: |
^^ 操作符后的元素会上升一级。同时 ^ 可以多个一起使用，^^^ 表示其后的元素上升三级：
1 | div+div>p>span+bq will produce: |
从上面的例子可以看出，> 操作符的优先级应该是最低的。一旦出现 > ，则其后所有元素都是在之前元素的下一层，除非使用 ^ 。
** 表示元素应该被输出多少次：
1 | ul>li*5 will produce: |
()() 用于组合，其实就是用来改变操作符优先级。
1 | div>(header>ul>li*2>a)+footer>p will produce: |
# . [attr]为元素添加 ID 属性，使用 #；添加 class 属性，使用 .；添加其他任意属性，使用 [attr] ：
1 | div#header+div.page+div#footer.class1.class2.class3 will produce: |
有几点需要注意：
对于一个元素，# 操作符只能出现一次，. 操作符却可以出现多次；
[attr] 表达式可以指定属性的值，也可以不指定。同一个元素的多个属性名不能相同；
指定 [attr] 表示式的属性的值时，如果值内有空格，如 "Hello World" ，则需要用单引号或者双引号把值包起来，否则不用。
$使用 * 操作符时可以搭配使用 $ 实现对多个元素的编号：
1 | ul>li#item$*5 will produce: |
如果想用诸如 001, 002, 003 这样的编号方式，只需要用多几个 $ 就可以了：
1 | ul>li#item$$$*5 will produce: |
{}花括号可以用来向元素添加文本：
1 | a{Click me} => <a href="">Click me</a> |
同时 {} 也可以作为一个单独的元素使用：
1 | {Click me} => Click me |
问题 1 ：这两段代码的输出一致么？
1 | a{Click me} a>{Click me} |
问题 2 ：那这两段呢？
1 | a{click}+b{here} a>{click}+b{here} |
为什么？
当你对 Emmet 的缩写语义非常熟悉时，你可能想添加一些格式，用让缩写的代码更好看、更可读一些：
1 | (header > ul.nav > li*5) + footer |
但是这段代码不会被正确翻译，因为 Emmet 在解析缩写语义时，把空格符作为停止转义的标志。
为什么 Emmet 这样设计呢？这是因为，缩写语义的作用是快速地生成标记语言代码，而并非用于阅读。所以缩写简洁、快速的代码，才是减少错误，提高开发效率的最佳实践。
官网的文档表示 Emmet 没有预置可用的标签集，即是说任何名字都可以生成标签对，但是在 Sublime Text 里面却不是这样的：
1 | foo => <footer></footer> // happened |
同时还为input标签做了特别的优化：
1 | input => <input type=""> |
可见 Sublime Text 里面 Emmet 插件并没有严格遵循 Emmet 缩写语义，而是为其做了一些优化以更适应 HTML 及 CSS 的编写。
安装 Package Control 插件：
在 Sublime Text 里使用 Ctrl+` 调出控制台，复制下面一段代码，回车：
1 | import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation' |
按Ctrl+Shift+P调出命令菜单，输入 PCI 快速检索至 Package Control: Install Package 项，回车后等待拉取插件列表，在列表中找到 Emmet，回车安装即可。
安装过程中需要下载 PyV8 ，用于 Python 代码与 Google V8 引擎的交互，需要一定时间。如果控制台信息表示 PyV8 下载失败，则可以从 emmetio/pyv8-binaries 处下载相应的 zip 包，解压至 C:\Users\_username_\AppData\Roaming\Sublime Text 2\Packages\PyV8\win64 (菜单项 => Preferences => Browse Packages)，其中 64 位 Windows 为 win64 子目录，其他照推。