Emmet is a plug-in that greatly simplifies HTML and CSS workflows for many popular text editors.

All of Emmet’s functions are displayed by pressing the TAB key after typing.

All the examples in this article are based on Sublime Text3 for Windows

HTML

Initial document formatting

html:5 
-> 


       
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>Copy the code

The element

Labels can be created with any element name

div -> <div></div>Copy the code

Nested operating

Child: >

Using the > symbol, the element to the right of the greater-than sign is nested within the element to the left.

div>ul>li 
->
<div>
    <ul>
        <li></li>
    </ul>
</div>Copy the code

Sibling: +

Use the + symbol to make the two sibling elements.

div + p
->
<div></div>
<p></p>Copy the code

Climb-up: ^

Using ^, you can move the element up one level in the DOM.

div+div>p>span^p
->
<div></div>
<div>
    <p><span></span></p>
    <p></p>
</div>Copy the code

Multiple ^, can go up multiple levels.

div+div>p>span^^p
->
<div></div>
<div>
    <p><span></span></p>
</div>
<p></p>Copy the code

multiplication:*

You can use * to define how many times an element needs to be created.

ul>li*5
->
<ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
</ul>Copy the code

Grouping:()

In complex abbreviations, use () to link elements of the same parent element together.

(div>dl>(dt+dd)*3)+footer>p
->
<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>Copy the code

Attribute operation

ID and Class

As with CSS, # denotes ID and. Denotes class.

div#header+div.page
->
<div id="header"></div>
<div class="page"></div>Copy the code

Custom attributes

Use [attr] to add the attributes you want

td[title="hello world" colspan=3]
->
<td title="Hello world!" colspan="3"></td>Copy the code

Project No. : $

You can repeat elements with *, numbering them with $.

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>Copy the code

You can also use multiple $and fill in the insufficient number with zeros.

ul>li.item$*5
->
<ul>
        <li class="item01"></li>
        <li class="item02"></li>
        <li class="item03"></li>
        <li class="item04"></li>
        <li class="item05"></li>
</ul>Copy the code

You can change the order of the number with @ or you can add – to the beginning of the number after @

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>Copy the code

Add the number after the sign, change the number at the beginning

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>Copy the code

Results of use together:

ul>li.item$@-3*5
->
<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>Copy the code

Text:{}

You can add a text value to an element by adding {} to it.

a{Click me}
->
<a href="">Click me</a>Copy the code

Note the position of {}

p>{Click }+a{here}+{ to continue}
->
<p>Click <a href="">here</a> to continue</p>Copy the code

Pay attention to the format

Sometimes Spaces are added for ease of reading, but this makes Emmet unusable.

(header > ul.nav > li*5) + footerCopy the code

The above example does not work, if the space between elements is removed.

Implicit label name

Using abbreviations under different tag names generates the specified tag.

  • li for ul and ol
  • tr for table, tbody, thead and tfoot
  • td for tr
  • option for select and optgroup
<div>.item</div>
->
<div class=item></div>Copy the code
<ul>.item</ul>
->
<ul><li class="item"></li></ul> Copy the code

Generates Lorem ipsum text

Lorem Ipsum is a Latin text, often used in typography, to test how the text looks in different font types. With Emmet, you simply type lorem or Lipsum to generate these words. You can also specify the number of words,

CSS

Values with units

Using an integer abbreviation automatically adds px units after it

m10 -> margin:10px;
m10-20 -> margin:10px 20px;
m-10--20 -> margin: -10px -20px;Copy the code

Using abbreviations for floating-point values automatically adds em units after them

m1. 5 -> margin:1.5em;Copy the code

Using alphabetic characters, units are automatically specified

m1.5ex -> margin:1.5ex;Copy the code

If you already know the unit, you don’t need to use a hyphen

m10ex20em -> margin:10ex 20em;
m10ex-5 -> margin:10ex -5px;Copy the code

The value of the alias,

p -> %
e -> em
x -> exCopy the code

color

Emmet supports hexadecimal colors,

c# 3 -> color:# 333;Copy the code

# is a separator of values, so no hyphen is required to separate.

bd5#0s -> border:5px # 000 solid;Copy the code

You can write one, two, or three characters as values for colors

# 1 -> # 11111
#e0 -> #e0e0e0
#fc0 -> #ffcc00Copy the code

No unit attribute

Some CSS properties have no units,

lh2 -> line-height: 2;
fw400 -> font-weight: 400;Copy the code

! important

Can be added after CSS abbreviation! , will automatically add! important

p! -> padding: ! important;
p! + m10e ->padding: ! important; margin : 10em;Copy the code

Vendor prefix

Attribute preceded by -, will automatically add the vendor prefix,

-bdrs -> 
        -webkit-border-radius:;-moz-border-radius:;-ms-border-radius:;-o-border-radius:; border-radius:;Copy the code

Once entered, you only need to enter the value once to add it to all attributes.

If not all vendor prefixes are required, specify them using abbreviations

  • w: webkit
  • m: moz
  • s: ms
  • o: o
-wm-bdrs -> 
    -webkit-border-radius:;-moz-border-radius:;Copy the code

The gradient

Use the lg (…). , the gradient property is automatically added

lg(left,# 0,top,black) 
-> 
background-image: -webkit-linear-gradient(left, # 0, top, black);
background-image: -o-linear-gradient(left, # 0, top, black);
background-image: linear-gradient(to right, # 0, top, black);Copy the code

The resources

Emmet official documentation

Emmet: HTML/CSS code writing magic

Emmet, let your HTML fly