Emmet Guide

Time:2020-9-24

Emmet Grammar

HTML

Enter the following three linesarbitrarilyOne, to achieve the same effect

html:5
html5
!

Output effect

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    
</body>
</html>

Add class, ID for the element

p.red
div#form-login

Add an attribute to the element

input[value=10]
a[href=javascript:void(0)]
div[style=color:red]

Output effect

<input type="text" value="10">
<a href="javascript:void(0)"></a>
<div style="color:red"></div>

Adding content to an element(innerText

section#slogan{Hello world!}

Output effect

<section id="slogan">Hello world!</section>

Element nesting, sibling, newline

p>span
p.parg1+p.parg2
/*^ is the end of the expression*/
p>span^p

Output effect

<p><span></span></p>

<p class="parg1"></p>
<p class="parg2"></p>

<p><span></span></p>
<p></p>

Expression grouping, same as^effect

(.foo>h1)+(.bar>h2)

Output effect

<div class="foo">
    <h1></h1>
</div>
<div class="bar">
    <h2></h2>
</div>

Defining multiple elements

ul>li*3

Output effect

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

For the class sequence number, use$

ul>li.item$3

Output effect

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

CSS

Abbreviation of CSS property and unitmappingas follows

/*Properties*/
m -> margin
w -> width
h -> height
ov-h -> overflow: hidden

/*Unit*/
p -> %
e -> em
x -> ex

@font-face

@f
@f+

Output effect

@font-face {
    font-family: 'FontName';
    src: url('FileName.eot');
    src: url('FileName.eot?#iefix') format('embedded-opentype'),
         url('FileName.woff') format('woff'),
         url('FileName.ttf') format('truetype'),
         url('FileName.svg#FontName') format('svg');
    font-style: normal;
    font-weight: normal;
}

Supplier prefix

trs
-super-foo
/* Browser prefix */
w -> -webkit-
m -> -moz-
s -> -ms-
o -> -o-

Output effect

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

Gradients

lg(left, #fff 50%, #000)

Output effect

background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(to right, #fff 50%, #000);

Generate test text

lorem10

Output effect

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum deleniti molestiae voluptatem placeat sequi sint saepe rem omnis dolorem amet cumque perferendis rerum possimus, autem corrupti distinctio, aut. Repellendus.