本文首发于2019年7月19日,介绍Emmet用法。
Emmet是一个内置于VSCode等编辑器中的代码辅助工具,它允许你使用CSS选择器的写法快速生成对应结构的HTML;
举个例子:你只要输入div.content#main,就可以生成一个<div class="content" id="main"></div>这样的HTML,这可以极大提高前端开发的效率;
Emmet同样还支持CSS语法的辅助。

起步

输入!html:5可以生成HTML5结构,如下:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

</body>
</html>

也可以输入!!!来只生成<!DOCTYPE html>
可以输入html:xt来生成HTML4过渡型;
可以输入html:4s来生成HTML4严格型。

DOM速写

生成一个带有ID、class的标签

例如输入div#main.large.content,生成的结果:

1
<div id="main" class="large content"></div>

使用方括号[]定义属性,使用花括号{}定义文本

例如输入td[span=4]{TEST},生成的结果:

1
<td colspan="4">TEST</td>

使用>+^来生成带父子级的标签结构

这里>表示子级标签;
例如输入ul>ul,生成的结果:

1
2
3
<ul>
<li></li>
</ul>

+表示同级兄弟标签;
输入thead+tbody,生成的结果:

1
2
<thead></thead>
<tbody></tbody>

^表示向父级移动一次;
输入header>nav^main,生成的结果:

1
2
3
4
<header>
<nav></nav>
</header>
<main></main>

使用*生成重复标签、用$表示编号

输入ul>li*5{item-$},生成的结果:

1
2
3
4
5
6
7
<ul>
<li>item-1</li>
<li>item-2</li>
<li>item-3</li>
<li>item-4</li>
<li>item-5</li>
</ul>

这里的*5表示重复5次,而$这是编号的占位符,编号从1开始。

使用多位的$可以生成多位的编号,例如$$$则会生成编号001
使用@来设置编号初值,例如$@4那么编号从4开始;
使用@-来生成倒序的编号。

使用圆括号()来给标签分组

输入dl>(dt+dd)*3,生成的结果:

1
2
3
4
5
6
7
8
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>

隐式标签、属性

默认的标签是div,例如输入.item结果为<div class="item"></div>
ulol的中默认标签是li
tabletheadtbodytfoot中默认标签是tr
tr中默认标签是td
selectoptgroup中默认标签是option

另外Emmet预设了一些元素的属性:
例如,img:s可以生成带有srcaltsrcset属性的img元素;
input:b可以生成type="button"input元素。

生成Lorem ipsum填充文本

使用lorem或者lipsum来生成这些填充文本;
内容如下:

1
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum eaque molestiae laudantium similique harum sequi, modi labore, doloremque expedita illo exercitationem maxime quidem, incidunt optio consequuntur? Suscipit a fugit atque?

也可以使用例如lorem10这种方式来指定文字的数量。

CSS输入辅助

常用属性和单位缩写

以下是几个常用CSS属性的简写:
wh表示widthheight
mp表示marginpadding,相应的例如mt表示margin-top
c表示color

以下是几个常用的单位的简写:
单位默认是px,不写单位,那就是px
p表示%
er表示emrem
x表示ex

如果记不住CSS属性,可以输入简称,Emmet会自动帮你匹配最接近的语法;
例如输入ov:hov-hovh都会匹配overflow: hidden;

生成!important只需要输入!感叹号即可。

复杂属性写法

因为Emmet不能使用空格,因此属性之间的空格用-来表示:
例如输入m30-40结果为margin:30px 40px
而输入m30--40结果为margin:30px -40px

可以使用+加号来同时写多条CSS:
例如输入m20-30+p10结果margin:20px;padding:10px;

颜色可以快速生成,输入#井号开头接颜色值:
#1生成#11111
#e0生成#e0e0e0
#fc0生成#ffcc00

复杂属性举例:
输入bd5#0s结果border: 5px #000 soild

自动添加浏览器前缀

只需添加-前缀,Emmet便会按顺序自动生成-webkit--moz--ms--o-前缀的属性;
也可以手动控制生成的前缀以及顺序,例如输入-wm前缀,则只会生成-webkit--ms-两个前缀。

特殊、复合型CSS自动生成

使用@f可以生成@font-face
而输入@ff可以生成增强版@font-face属性,里面很多属性都已经预设好了,如下:

1
2
3
4
5
6
7
8
9
10
@font-face {
font-family: 'FontName';
src: url('FileName.eot');
src: url('FileName.eot?#iefix') format('embedded-opentype'),
url('FileName.woff') format('woff'),
url('FileName.ttf') format('truetype'),
url('FileName.svg#FontName') format('svg');
font-style: normal;
font-weight: normal;
}

CSS3中的linear-gradient属性可以产生渐变效果,但是属性复杂,还需要添加浏览器前缀;
使用Emmet时,可以使用lg()指令快速生成,例如输入lg(left, #fff 50%, #000)输出为:

1
2
3
4
5
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);