Emmet(前身为 Zen Coding)是一个能大幅提高前端开发效率的工具。在前端开发的过程中,一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等。于是,就有了 Emmet,它可以极大地提高代码编写的效率,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发。

基本规则

语法基本规则如下:

  • E 代表 HTML 标签。
  • E#id 代表 id 属性。
  • E.class 代表 class 属性。
  • E[attr=foo] 代表某一个特定属性。
  • E{foo} 代表标签包含的内容是 foo。
  • E>N 代表 N 是 E 的子元素。
  • E+N 代表 N 是 E 的同级元素。
  • E^N 代表 N 是 E 的上级元素。

基础用法

元素

可以使用元素的名称,如 div 或 p 来生成 HTML 标签。Emmet 没有一组可用的标签名称,可以写任何单词并将其转换为标签。也就是只要知道元素的缩写,Emmet 会自动转换成对应标签。

形如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
div => <div> </div>
foo => <foo> </foo>
html:5 => 将生成 HTML5 标准的包含空 body 的基本 DOM
html:xt => 生成 XHTM L过渡文档类型,DOCTYPE 为 XHTML
html:4s => 生成 HTML4 严格文档类型,DOCTYPE 为 HTML 4.01
a:mail => <a href="mailto:"></a>
a:link => <a href="http://"></a>
base => <base href="">
br => <br>
link => <link rel="stylesheet" href="">
script:src => <script src=""></script>
form:get => <form action="" method="get"></form>
label => <label for=""></label>
input => <input type="text">
inp => <input type="text" name="" id="">
input:hidden => <input type="hidden" name=""> input:h 亦可
input:email => <input type="email" name="" id="">
input:password => <input type="password" name="" id="">
input:checkbox => <input type="checkbox" name="" id="">
input:radio => <input type="radio" name="" id="">
select => <select name="" id=""></select>
option => <option value=""></option>
bq => <blockquote></blockquote>
btn => <button></button>
btn:s => <button type="submit"></button>
btn:r => <button type="reset"></button>

文本操作符

如果想在生成元素的同时添加文本内容,可以使用 {}

1
2
3
4
5
div{这是一段文本}
<div>这是一段文本</div>

a{点我点我}
<a href="">点我点我</a>

属性操作符

属性运算符用于修改输出元素的属性。

Id 和 Class:

1
2
div.test  => <div class="test"></div>
div#pageId => <div id="pageId"></div>

隐式标签则会自动联想生成对应元素,根据配置规则不同生成的结果也是不同的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.class
=>
<div class></div>

em>.class
=>
<em><span class></span></em>

table>.row>.col
=>
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>

绑定多个类名用 . 符号连续起来即可:

1
2
3
div.test1.test2.test3
=>
<div class="test1 test2 test3"></div>

自定义属性使用 [attr1='' attr2='']

1
2
3
a[href='#' data-title='customer' target='_blank']
=>
<a href="#" data-title="customer" target="_blank"></a>

嵌套操作符

嵌套操作符用于将缩写元素放置在生成的树中,不管它应放置在上下文元素的内部或附近。

子级

通过 > 标识元素可以生成嵌套子级元素,可以配合元素属性进行连写。

1
2
3
4
5
6
7
div#pageId>ul>li
=>
<div id="pageId">
<ul>
<li></li>
</ul>
</div>

同级

+ 字符表示生成兄弟级元素。

1
2
3
4
div#pageId+div.child
=>
<div id="pageId"></div>
<div class="child"></div>

父级

^ 用于生成父级元素的同级元素。从这个 ^ 字符所在位置开始,查找左侧最近的元素的父级元素并生成其兄弟级元素。

1
2
3
4
5
6
7
8
div>p.parent>span.child^ul.brother>li
=>
<div>
<p class="parent"><span class="child"></span></p>
<ul class="brother">
<li></li>
</ul>
</div>

分组操作符

分组使用 () 来实现缩写的分离。比如这个例子,如果不加括号那么 a 将作为 span 的同级元素生成,加上括号 a 将与 () 内的元素同级。

1
2
3
4
5
6
7
8
9
div>(ul>li+span)+a
=>
<div>
<ul>
<li></li>
<span></span>
</ul>
<a href=""></a>
</div>

乘法

使用 * 运算符,可以定义元素应输出的次数:

1
2
3
4
5
6
7
ul>li*3
=>
<ul>
<li></li>
<li></li>
<li></li>
</ul>

自动编号

在生成重复项时,增加一个序号,只需要加上 $ 符号即可。

1
2
3
4
5
6
ul>li.item${item number:$}*3
<ul>
<li class="item1">item number:1</li>
<li class="item2">item number:2</li>
<li class="item3">item number:3</li>
</ul>

编号方向

使用 @ 修饰符,可以更改编号方向(升序或降序)和基数(例如起始值)。注意这个操作符在 $ 之后添加。

@- 表示降序,@+ 表示升序。默认使用升序。

1
2
3
4
5
6
7
ul>li.item$@-*3
=>
<ul>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>

若要两位数的序号,就得写两个 $

1
2
3
4
5
6
7
ul>li.item$$*3
=>
<ul>
<li class="item01"></li>
<li class="item02"></li>
<li class="item03"></li>
</ul>

编号基数

@N 可以改变起始值。需要注意的是,如果配合升降序使用的话,N 放到 +- 符后。

1
2
3
4
5
6
7
ul>li.item$@-10*3
=>
<ul>
<li class="item12"></li>
<li class="item11"></li>
<li class="item10"></li>
</ul>

评论