前端必知的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實用操做