使用Emmet加速Web前端开发

安装Emmet插件

一旦你写好缩写之后，按一下tab键就能生成你所请求的代码

创建初始文档

任何一个HTML文件，都具有一些默认的文档结构。使用Emmet来创建需要的时间不到一秒。只要输入!或html:5，然后点击tab键，你就会看到一个HTML5的doctype默认标签。

html:5或!：HTML5文档类型
html:xt：XHTML过渡型文档类型
html:xs：XHTML严格型文档类型
html:4t：HTML4过渡型文档类型
html:4s：HTML4严格型文档类型

子元素

使用>运算符可以用来生成彼此嵌套的元素：
section>div>p
上面的代码会生成下面的代码：

相邻元素

使用+运算符可以用来生成彼此相邻的元素：
section+div+p
上面代码会生成下面的代码：

返回上一层

使用^运算符，可以让你的代码返回上一层。当你使用>嵌套元素时，想让后面的回到上一层，那么这个方法很适用。
section>div>p>a^p
这个缩写将两个段落元素都放置在div内，但只有第一个段落里会包含一个链接。

其实这个就相当于：
section>div>(p>a)+p

乘法

如果你想一次性生成多个相同的元素，比如列表中的li，那么就可以使用乘法运算符
ul>li*5
上面代码会生成5个li：

除了能一次性生成多个相同的标签之外，我们还可以通过$符号做递增；通过$@-符号做递减；通过$@3*5这样的方式从第三个开始命名：

组合

为了更有效的利用嵌套，我们常会制作一些代码片段。在Emmet中你可以通过()将一个块组合在一起，来看一个简单的示例
ul>(li>a)*3
上面的代码就会生成3个li，而且每个li中套了一个a

快速添加类名、ID、文本和属性

在Emmet中，还有一个功效，能快速帮助你添加类名、ID、文本和属性。

使用E#ID添加ID名
使用E.class添加类名
使用E[attr]添加属性
使用E{text}添加文本

省略标签名

在Emmet中可以省略标签名，默认情况下，如.item和div.item起到的作用是一致的
。在实际中还有几种情况：

ul和 ol中输入指的是li
table、tbody、thead和tfoot指的是tr
tr中指的是td
select和optgroup指的是option

Emmet和CSS

属性

CSS提供了属性的值，比如font-size，margin和 padding等等：

Emmet定义了所有已知的CSS属性和缩写。所以border-bottom缩写是bdb，border-top缩写是bdt。正如下面的示例font-size缩写是fz：
假设你在你的编辑器中输入fz，然后按一下tab键，Emmet就像一个魔法师一样将缩写变成有效的CSS，并且放在你的光标之处。

13.gif

属性值

现在我们已经了解了CSS的属性，它只需要添加一个值。这是通过一个组合缩写和所需要的值一起来完成。例如，fz18将输出font-size:18px。你不需要输入px，因为Emmet将会其单位是px。如果一个项目没有一个单位（如font-weight），Emmet会很聪明，他不会添加像素单位。

单位

如果你在CSS不经常使用的像素(px)单位，那会是什么？是em、rem、%、ex和px吗？那么这些单位在Emmet中都是可以使用的。在Emmet中每一个单位都有其缩写形式：

px→ 默认
p→ %
e→ em
r→ rem
x→ ex

要使用一个单位，只需要在值的后面使用缩写的单位值。下面的例子是使用em定义font-size：

多个单位

CSS中的某些属笥，比如margin，允许多个值。在Emmet中要做到这一点，只需要每个值之间使用破折号(-)。来看看下面的例子，给body定义margin的四个值：

颜色

在Emmet中使用#前缀，后面紧跟颜色值，但不同的字符数将会输出不同的十六进制代码。来看一些例子：

＃1→ ＃111111
＃E0→ ＃e0e0e0
＃FC0→ ＃FFCC00

下面定义通过c#2定义body的颜色值，将会输出#222：

!important

尽管在CSS中!important并不经常使用，但在Emmet也带有一定的缩写。添加!就可以自动生成：

多属性

现在我们具Emmet的CSS特性的一个基本了解，也是将它们放在一起的时候。就类似于Emmet和HTML中的相邻元素的功能。可以使用加号+运算符来创建多个属性。我们来看一个简单的示例：

示例

记住，你可以使用所有缩写或者将其分开。这并不是很重要，关键的是你要使用得正确，它能更容易让你编写你的CSS。这里有一个动画，他给div.panel创建一些样式：