Emmet Documentation ( Abbreviations+CSS Abbreviations )

Emmet Documentation

 

Emmet — the essential toolkit for web-developers

 

Abbreviations

Abbreviations Syntax

Elements

You can use elements’ names like div or p to generate HTML tags. Emmet doesn’t have a predefined set of available tag names, you can write any word and transform it into a tag: div → <div></div>, foo → <foo></foo> and so on.

Nesting operators

Child: >

Sibling: +

Climb-up: ^

div+div>p>span+em^bq

...outputs to

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

You can use as many ^ operators as you like, each operator will move one level up:

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

 ...will output to

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

Multiplication: *

Grouping: ()

Parenthesises are used by Emmets’ power users for grouping subtrees in complex abbreviations:

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

...expands to

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

Attribute operators

ID and CLASS

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

Custom attributes

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

Item numbering: $

ul>li.item$*5

Changing numbering base and direction

For example, to change direction, add @- after $:

ul>li.item$@-*5

…outputs to

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

To change counter base value, add @N modifier to $:

ul>li.item$@3*5

…transforms to

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

You can use these modifiers together:

ul>li.item$@-3*5

…is transformed to

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

Text: {}

Notes on abbreviation formatting

For example, use spaces between elements and operators, like this:

(header > ul.nav > li*5) + footer

But it won’t work, because space is a stop symbol where Emmet stops abbreviation parsing.

 

Element types

In the abbreviations section of snippets.json you can also define aliases: a short-hands for commonly used abbreviations. Aliases can be used to define:

• short names for long tag names;
• referencing commonly used abbreviations.

In snippets.json file, you can find the following definitions:

...
"html": {
    "abbreviations": {
        "bq": "blockquote",
        "ol+": "ol>li"
    }
}

 

Implicit tag names

Here’s how it resolves the names for some parent elements:

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

Take a look at some abbreviations equivalents with implicit and explicit tag names:

.wrap>.content	div.wrap>div.content
em>.info	em>span.info
ul>.item*3	ul>li.item*3
table>#row$*4>[colspan=2]	table>tr#row$*4>td[colspan=2]

 

“Lorem Ipsum” generator

ul.generic-list>lorem10.item*4

 

CSS Abbreviations

How it works?

First, it looks for a m10 snippet definition in snippets.json. If it’s found, it simply outputs it as a regular snippet. Otherwise, it extracts value from abbreviation.

When property part is found, resolver searches for the snippet definition in snippets.json. For an m part, it will find "m": "margin:|;" definition (| character is used as a caret position reference when the snippet is expanded).

Supplying values with units

By default, when you expand an abbreviation with integer value, Emmet outputs it with a px unit: m10 → margin: 10px;

If you’re expanding an abbreviation with a float value, it is outputted with an em unit: m1.5 → margin: 1.5em;

But you can explicitly provide the unit name, just by putting any alpha characters right after value: m1.5ex → margin: 1.5ex;, m10foo → margin: 10foo;.

If you’re explicitly defining units, you don’t need to use hyphens to separate values anymore: m10ex20em → margin: 10ex 20em;, m10ex-5 → margin: 10ex -5px;.

Value aliases

Emmet has a few aliases for commonly used values:

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

You can use aliases instead of full units:

• w100p →  100%
• m10p30e5x → margin: 10% 30em 5ex

Color values

Emmet supports hex color values, like this: c#3 → color: #333;

The # sign is a value separator so you don’t need to use hyphen to separate it. For example, bd5#0s expands to border: 5px #000 solid: the # sign separates color from 5 and since s (alias to solid) is not a hexadecimal character, it can be used without - value separator.

You can write one, two, three or six characters as color value:

• #1 → #111111
• #e0 → #e0e0e0
• #fc0 → #ffcc00

Unit-less properties

Some CSS properties are defined as unit-less, e.g. no unit suffix will be outputted: lh2 → line-height: 2;, fw400 → font-weight: 400;.

These values are: 'z-index, line-height, opacity and font-weight but you can override them with css.unitlessProperties preferences.

!important modifier

p!+m10e!

...will produce

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

Vendor prefixes

How it works?

 For example, for -bdrs abbreviation it will look for a bdrs definition. snippet.json has the following definition:

"bdrs": "border-radius:|;"

Add prefixed properties by default

Explicit vendor prefixed

-wm-trf

Emmet has the following one-letter prefixes:

• w: webkit
• m: moz
• s: ms
• o: o

Gradients

lg( left, #fc0, 30%, red)
border-image:lg( left, #fc0, 30%, red)

 ...will produce

    background-image: -webkit-linear-gradient(left, #fc0, 30%, red);
    background-image: -moz-linear-gradient(left, #fc0, 30%, red);
    background-image: -o-linear-gradient(left, #fc0, 30%, red);
    background-image: linear-gradient(to right, #fc0, 30%, red);
    -webkit-border-image:-webkit-linear-gradient(left, #fc0, 30%, red);
    -moz-border-image:-moz-linear-gradient(left, #fc0, 30%, red);
    -o-border-image:-o-linear-gradient(left, #fc0, 30%, red);
    border-image:linear-gradient(to right, #fc0, 30%, red);

Fallback value

In preferences, you can enable css.gradient.fallback option to produce a fallback background-color CSS property whenever a gradient definition for background-* CSS property is expanded.

Fuzzy search

For example, instead of writing ov:h (overflow: hidden;) abbreviation, you can write ov-h, ovh or even oh. 

Remember that you can always create your own snippets or redefine existing ones to fine-tune fuzzy search experience.