Emmet简介

the Essential Toolkit for Web Developers

slides.newfuture.cc/emmet-introduction/
@New Future

Emmet

提高前端生产力的插件

前身Zen Coding

像jQuery一样写HTML/CSS;减少复制和粘贴

目录

HTML缩写

简单快速书写html和css

HTML缩写

!然后按下Tab

自动生成默认的HTML模板

<!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>

lang和charset以及模板可自定义配置

缩写规则

tag:attr 冒号分割

如生成邮件链接

a:mail

<a href="mailto:"></a>

MORE

完整的缩写手册和CSS缩写

参考速查表: https://docs.emmet.io/cheat-sheet/

层级关系

  • >子元素 (child)
  • +兄弟元素 (sibling)
  • ^返回上级 (climb-up)
  • ()组 (group)

> 子级

和CSS中一样,>表示子元素

nav>ul>li>a

展开成HTML

<nav>
    <ul>
        <li><a href=""></a></li>
    </ul>
</nav>

+ 同级

和CSS中一样,+表示同级元素

article>h1+section+section

展开成HTML

<article>
    <h1></h1>
    <section></section>
    <section></section>
</article>

^ 父级

section>h2^section

转成HTML(^使第二个section跳至h2上级)

<section>
    <h2></h2>
</section>
<section></section>

( )分组

(section>h2)+section

转成HTML(括号类是一组)

<section>
    <h2></h2>
</section>
<section></section>

复制

  • * 乘法
  • $ 自增量
  • @ 自增范围

*乘法

ul>li*3

快速复制3份

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

$ 自增

list_$自增

ul>li#list_$*3

<ul>
    <li id="list_1"></li>
    <li id="list_2"></li>
    <li id="list_3"></li>
</ul>

多个$可填充0

ul>li#list_$$$$*2

<ul>
    <li id="list_0001"></li>
    <li id="list_0002"></li>
</ul>

@ 起始

ul>li#list_$@-*3

<ul>
    <li id="list_3"></li>
    <li id="list_2"></li>
    <li id="list_1"></li>
</ul>

@-表示倒序,@n从n计数

ul>li#list_$@*2^ul>li#list_$@3*3

<ul>
    <li id="list_1"></li>
    <li id="list_2"></li>
</ul>
<ul>
    <li id="list_3"></li>
    <li id="list_4"></li>
    <li id="list_5"></li>
</ul>

属性

  • # id
  • . class
  • [] 自定义属性
  • {} 内容

#id

和css中一样#表示ID

div#header

<div id="header"></div>

div是默认标签,此处可以省略div,结果一样

#header

<div id="header"></div>

缺省标签

emmet会结合上文自动选择缺省标签:

  • div 默认
  • span 不能使用div的时候
  • li 在 ul和ol后面
  • tr和td 在 table后

如前面变量中的栗子,去li效果一样

ul>#list_$*3

<ul>
    <li id="list_1"></li>
    <li id="list_2"></li>
    <li id="list_3"></li>
</ul>

. class

和css中一样.表示class

button.btn

<button class="btn"></button>

多个class可以同时使用

.btn.is-disabled

<div class="btn is-disabled"></div>

[]自定义属性

和css中一样[]表示属性

link[href="style.css"]

<link rel="stylesheet" href="style.css" />

多个属性可以同时使用,支持两种写法

img.logo[src="logo.svg"][title="LOGO"]
img.logo[src="logo.svg" title="LOGO"]

<img src="logo.svg" alt="" class="logo" title="LOGO" />

{}内容

.Btn{发送}

<div class="Btn">发送</div>

结合变量的栗子

ul>li{item$}*3

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

Emmet + BEM规范

大部分重复内容都是可以省掉的!

VScode 配置

{
    "emmet.preferences": {
        "bem.elementSeparator": "-",
        "bem.modifierSeparator": "_",
        "bem.shortElementPrefix": "-"
    },
    "emmet.syntaxProfiles": {
        "html": {
            "filters": "html, bem"
        }
    },
    "emmet.variables": {
        "lang": "zh"
    } 
}

组件class自动补全

  • modifier自动补全组件名称
.NavBar._top

<div class="NavBar NavBar_top"></div>
  • 自动补全父级组件元素
.Nav>a.-link

<div class="Nav"><a href="" class="Nav-link"></a></div>

DEMO

HTML速写

!
link[href=https://style.chinacloudsites.cn/preview/dist/blog/css/blog.css]
header.NavBar._top+main
(nav.Nav>a.-link)*2
.PostCard>.-user+.-content>p.-text{hello}+ul.-imgList^.-status>.-time+.-like+.-comment
.UserBar>img.-avatar+.-info>.-name{NewFuture}+.-title{intern}^.-follow

botton.Btn.is-inverse{+ 关注}
(.PostCard-img>img[src=https://avatars6.githubusercontent.com/u/6290356?v=400])*3

.PostCard>(.-user.UserBar>img.-avatar+.-info>.-name{NewFuture}+.-title{intern}^.-follow>botton.Btn.is-inverse{+ 关注})+.-content>p.-text{hello}+ul.-imgList^.-status>.-time+.-like+.-comment

总结符号表

符号#*. *[*]{*}
说明IDclass自定义属性内容
符号*>**+**^*(*)
说明包含并列返回一级分组
符号*$@
说明批量复制循环变量起始值

THE END

THANKS

Emmet简介

CODE: https://github.com/NewFuture/slides
LINK: https://slides.newfuture.cc/emmet-introduction/