前端必知的Emmet实用操作

走在前端的大道上

这是一篇介绍Emmet的文章,Emmet是专为我们前端开发人员设计的一个工具,可以大大提高您的HTML和CSS工开发效率。可以说是前端开发的神器之一

Emmet简介

作为一个前端,你肯知道在前端开发的过程中,一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候,效率会特别低下,因为需要敲打很多尖括号,而且很多标签都需要闭合标签等。于是,就有了 Emmet(前身为 Zen Coding)。(当然这是以前的情况,现在作为一个合格的现代编辑器多多少少都集成了代码自动提示,自动补全等功能)。
它作为一款强大的插件支持了许多编辑器与IDE,什么vscode,sublime,atom,webstorm等等都支持你可以直接在你的编辑器插件中搜索安装,一些已自带集成
我们先来看看官网的示例

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

在我们用了emmet后 一个 tap 就会生成下面这一大段。酷不酷炫,炫不炫酷

<div id="page">
    <div class="logo"></div>
    <ul id="nav">
        <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 ⟹ <div></div>

foo ⟹ <foo></foo>

后代: >

div>ul>li ⟹ 

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

兄弟:+

div+p+bq ⟹ 

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

上级:^

div+div>p>span+em^bq ⟹ 

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

乘法:*

ul>li*5 ⟹ 

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

分组:()

div>(header>ul>li*2>a)+footer>p 
⟹ 

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

ID 和 CLASS

div#header+div.page+div#footer.class1.class2.class3
⟹ 

<div id="header"></div>
<div class="page"><div>
<div id="footer" class="class1 class2 class3"></div>

自定义属性

td[title="Hello world!" colspan=3] ⟹ 

<td title="Hello world!" colspan="3"></td>

自增符号:$

ul>li.item$*5  
⟹ 

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

改变自增基数和方向:@

ul>li.item$@-*5 
⟹ 

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

ul>li.item$@3*5  ⟹ 

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

文本:{}

a[#]{Click me} ⟹ 

<a href="#">Click me</a>

Lorem Ipsum(乱数假文):lorem

lorem  
⟹ 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique impedit quaeiure

Emmet的css支持

css属性

m ⟹ margin: 

fz  ⟹ font-size:

属性值

m10 ⟹ margin: 10px;
mt10  ⟹  margin-top: 10px;

多个属性值:对于有多个属性值的CSS属性,在编写时只需在属性值之间添加-:

m4-6 ⟹ margin: 4px 6px;

单位
Emmet默认单位为px,如果你想使用其他单位就继续看下面吧

  • p → %
  • e → em
  • r→ rem
  • x → ex
w100p  ⟹  width: 100%
m10p30e5x   ⟹  margin: 10% 30em 5ex

参考文章:前端必知的Emmet实用操作

相关推荐