Your Site Title

Emmet

Syntax

Elements

div -> <div></div>

Nesting operators

• Child: >

  div>ul>li

• Sibling: +

  div+p+bq

• Climb-up: ^

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

• Multiplication: *

  ul>li*5

• Grouping: ()

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

Attribute operators

• ID and CLASS: elem#id and elem.class

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

• Custom attributes: [attr]

  td[title=”Hello world!” colspan=3]

• Item numbering: $

  ul>li.item$$*5

• Changing numbering base and direction: $@- $@N

  ul>li.item$@-*5

• Text: {}

  a{Click me}

  Click me

• Notes on abbreviation formatting

Implicit tag names

Emmet looks at the parent tag name every time you’re expanding the abbreviation with an implicit name.

• li for ul and ol
• tr for table, tbody, thead and tfoot
• td for tr
• option for select and optgroup

“Lorem Ipsum” generator

ul.generic-list>lorem2.item*4

<ul class="generic-list">
    <div class="item">Dolor ducimus!</div>
    <div class="item">Ipsum sed</div>
    <div class="item">Adipisicing in.</div>
    <div class="item">Ipsum voluptatem.</div>
</ul>

CSS Abbreviations

• Snipper(见Reference Emmet-vim)

• Units

  m10 -> margin: 10px; m1.5 -> margin: 1.5em; m1.5ex -> margin: 1.5ex; m1.5foo -> margin: 1.5foo;

  p -> % e -> em x -> ex

• Color values

  #1 -> #111111 #e0 -> #e0e0e0 #fc0 -> #ffcc00

• !important modifier

  p!+m10e!

  padding: !important; margin: 10em !important;

Reference

• Emmet — the essential toolkit for web-developers
• Emmet-vim

This site is open source. Improve this page.