抛弃HTML Snippets，拥抱Emmet成为html大师！

我是小阵不悲催
3,062 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情

前言

大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟

开开心心学技术大法~~

开心

来了来了，他真的来了~

正文

本文应该是Emmit教程中最为全面的了吧，偷笑~ 嘻嘻

Emmet概述

官方的解释：

缩写是 Emmet 工具包的核心：这些特殊的表达式在运行时被解析并转换成结构化的代码块，例如 HTML。缩写的语法看起来像 CSS 选择器，带有一些特定于代码生成的扩展。因此，每个 Web 开发人员都已经知道如何使用它。

简单来说，Emmet是基于html和css这些基础，当然，也包括React和Vue，设计而出的一套snippet。

就跟我们下载的其他snippet一样，或者我们手动在vscode里新增的snippet片段，效果是一样一样的。

下面，我们来介绍下Emmet到底有多方便吧！

先贴一个例子

#page>div.logo+ul#navigation>li*5>a{Item $}

生成：

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

好啦，下面详细来看下语法吧，语法也很简单哟！简单到看着看着就上瘾的程度哈哈哈哈

Emmet语法

  • >添加子节点

    • div>p

      <div>
  <p></p>
</div>

  • +同级添加标签

    • div+p

      <div></div>
<p></p>

  • ^层级向上跳一级

    • 通常用于>之后，可以理解为Emmet是线性的，可以通过>和^来互相跳转层级

    • div>p+bq

      <div>
  <p></p>
  <blockquote></blockquote>
</div>

    • div>p^bq

      <div>
  <p></p>
</div>
<blockquote></blockquote>

  • *重复，不止可以重复标签，也可以重复属性值和文本

    • div*3

      <div></div>
<div></div>
<div></div>

  • .给标签添加class

    • div.name

      <div class="name"></div>

    • div.name1.name2

      <div class="name1 name2"></div>

  • #给标签添加id

    • div#name

      <div id="name"></div>

  • []给标签添加属性

    • div[name='xxx']

      <div name="xxx"></div>

  • ()分组，与其他所有语法一样，是用来将不同操作分隔成不同分组的

    • div+p*3

      <div></div>
<p></p>
<p></p>
<p></p>

    • (div+p)*3

      <div></div>
<p></p>
<div></div>
<p></p>
<div></div>
<p></p>

  • {}文本

    • div{xxx}

      <div>xxx</div>

  • $通常与*一同使用，用来填充递增的序号

    • div{item$}*3

      <div>item1</div>
<div>item2</div>
<div>item3</div>

    • div.item$*3

      <div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>

    • div[name='item$']*3

      <div name="item1"></div>
<div name="item2"></div>
<div name="item3"></div>

  • @x是用于指定基础序号的，也因此通常与$向关联使用

    • div.item$@2*3

      <div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>

  • @-是用来倒序序号的

    • div.item$@-*3

      <div class="item3"></div>
<div class="item2"></div>
<div class="item1"></div>

    • 也可以与@x联合使用

      • div.item$@-3*3

        <div class="item5"></div>
<div class="item4"></div>
<div class="item3"></div>

Emmet语法中间不可以有缩进与空格，当然，如果是{}定义文本的话可以有空格

否则默认为不使用Emmet规则

Emmet css语法

这个语法用于css中

css属性+px

这个规则很简单，基本所有的都可以参考，比如

  • m2

    margin: 2px;

  • p2

    padding: 2px;

  • mr2

    margin-right: 2px;

  • t2

    top: 2px;

其他的属性可以类比

css属性+百分比

如果number单独使用，则被解释成px，如果添加%或p则为百分比

  • m2%

    margin: 2%;

  • m2p

    margin: 2%;

其他的可以类比

css属性+em

number后跟e即可

  • m2e

    margin: 2em;

其他类比

css属性+ex

number后跟x即可

  • m2x

    margin: 2ex;

其他类比

css属性+important

  • m2!

    margin: 2px !important;

其他类比

css属性+颜色

默认color的颜色为#000，此时光标会选中#000，直接更改颜色即可，比如，此时直接键入red即可将默认的#000为red

  • c!

    color: #000 !important;

  • c#1

    color: #111;

  • c#e2

    color: #e2e2e2;

  • c#fc0

    color: #fc0;

    此时跟#ffcc00作用一致

css属性的模糊匹配

所有的css属性都可以通过键入关键字符来模糊匹配相应的css属性

  • bg

    background: #000;

  • poa

    position: absolute;

  • lh

    line-height: ;

    此时可以直接键入具体数值

  • bxz:cb或bxzc

    box-sizing: content-box;

  • bxz:bb或bxzb

    box-sizing: border-box;

  • fxdc

    flex-direction: column;

  • aic

    align-items: center;

  • ais

    align-items: start;

  • jcc

    justify-content: center;

  • jcs

    justify-content: start;

  • db

    display: block;

  • df

    display: flex;

  • dib

    display: inline-block;

  • lg或bgi

    background-image: linear-gradient();

其他可以类比

css属性与:联合使用

:后面可以直接书写目标属性，当然，有的可以直接缩写

如

  • bgs:100p或bgs100p 
    background-size: 100%;
  • pl9:! 
    padding-left: 9px !important;

其他可以类比

css属性+Emmet语法

css可以像标签一样使用Emmet语法

  • m2+p3+df+aic

    margin: 2px;
padding: 3px;
display: flex;
align-items: center;

  • t3+poa+l2

    top: 3px;
position: absolute;
left: 2px;

其他类比，这个有点限制，比如不能poa在前面等。

其他

其他的基本没了，其他的涉及一些结合Emmet的快捷操作，比如跳转、定位等。

这些功能现在编辑器都可以实现。

最主要的用途就是上述html和css的便捷书写

Emmet语法适用于React和vue，还有一般网页，可以说是非常全能了。

Emmet官网

结语

如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~

文章如有错误或不严谨之处，还望指出，感谢感谢！！！

加油！

往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」

avatar
文章
阅读
粉丝