前端必知的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>

　　同時Emmet 還採用了css 的元素選擇器

　　後代： >

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 quos itaque, deserunt dolore in consequatur veniam cumque, est voluptatibus minima, velit culpa, reprehenderit aspernatur iste facilis. Rerum!

　　哈哈哈，真棒只要五個字母一個tap家可以生成這麼大一段站位文字。

　　ok，差不多這就Emmet 語法的全部了。除了上面的簡寫形式，Emmet對css也提供有一些簡寫,下面我們就來看看

　　Emmet的css支援

　　css屬性

m ⟹ margin: 

fz  ⟹ font-size: 
……

　　其實這些屬性簡寫都不需要特意去記，你只組要按著你的思路來猜這個屬性的簡寫就好了。

　　屬性值

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

　　多個屬性值：對於有多個屬性值的CSS屬性，在編寫時只需在屬性值之間新增-：

m4-6 ⟹ margin: 4px 6px;

　　Emmet預設單位為px，如果你想使用其他單位就繼續看下面吧

　　單位

　　在Emmet中每一個單位都有其縮寫形式(當然了你記不住也沒關係，直接按全就好)

• p → %
• e → em
• r→ rem
• x → ex

w100p  ⟹  width: 100%
m10p30e5x   ⟹  margin: 10% 30em 5ex

　　總結

　　在這兒，我們大致瞭解了下Emmet這個神器，學會了基本的使用，關於Emmet的簡寫，不需要刻意去記憶，因為他的簡寫方式都很直觀，你直接猜也能寫對，寫不對也沒關係，去官網看看就好了(建議有時間還是粗略的看一些文件)emmet能大大提高我們編碼效率，還沒用的趕快用起來吧。