前端必知的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 就會生成下面這一大段。酷不酷炫，炫不炫酷

　　下面我們直接貼代碼來看每一個語法的使用希望你在看完就會。

　

　Emmet 語法

　　標籤

div ?

foo ?

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

　　後代： >

div>ul>li ?

　　兄弟：+

div+p+bq ?

　　上級：^

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

　　乘法：*

ul>li*5 ?

　　分組：()

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

　　ID 和 CLASS

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

　　自定義屬性

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

　　自增符號：$

ul>li.item$*5 ?

　　改變自增基數和方向：@

ul>li.item$@-*5 ?

ul>li.item$@3*5 ?

　　文本：{}

a[#]{Click me} ?

Click me

　　Lorem Ipsum(亂數假文)：lorem

lorem ?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique impedit quaeiure quos itaque, deserunt dolore in consequ

atur 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能大大提高我們編碼效率，還沒用的趕快用起來吧。

via：http://www.xingxin.me/posts/592bdcae068eb96f0a91d5ef

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！

請您繼續閱讀更多來自 全棧開發者中心 的精彩文章: