Emmet Documentation

Actions

Expand Abbreviation

Balance

选择范围

Go to Matching Pair

匹配对应标签

在sublime text 3中似乎被覆盖了。

Wrap with Abbreviation

Wrapping individual lines

    About

    News

    Products

    Contacts

shift+ctrl+A

nav>ul.nav>li.nav-item$*>a

<nav>

        <ul class="nav">

            <li class="nav-item1"><a href="">About</a></li>

            <li class="nav-item2"><a href="">News</a></li>

            <li class="nav-item3"><a href="">Products</a></li>

            <li class="nav-item4"><a href="">Contacts</a></li>

        </ul>

    </nav>

Note you don’t need to add multiplier number for wrapping lines (e.g. li*5), you have to use * operator withoutnumber, like this: li*.

Removing list markers

You can let Emmet do this for you: simply add “trim“ (|t, pipe-t) filter to abbreviation to automatically remove list markers from wrapped content:

1. Ordered item 1

2. Ordered item 2

3. Ordered item 3

shift+ctrl+A

nav>ul.nav>li.item$*>a|t

<nav>

        <ul class="nav">

            <li class="item1"><a href="">Ordered item 1</a></li>

            <li class="item2"><a href="">Ordered item 2</a></li>

            <li class="item3"><a href="">Ordered item 3</a></li>

        </ul>

    </nav>

Controlling output position

You can control the output position with $# placeholder. Note that $# is not part of the abbreviation syntax, so you have to put it inside the attribute value or text node, like this: ul>li[title=$#]*>{$#}+img[alt=$#].

<ul>

        <li title="About">About<img src="" alt="About"></li>

        <li title="News">News<img src="" alt="News"></li>

        <li title="Products">Products<img src="" alt="Products"></li>

        <li title="Contacts">Contacts<img src="" alt="Contacts"></li>

    </ul>

Go to Edit Point

Select Item

Toggle Comment

Split/Join Tag

This action splits and joins tag definition, e.g. converts from <tag/> to <tag></tag> and vice versa. Very useful for XML/XSL developers.

Remove Tag

Merge Lines

文字合并成一行

在sublime text 3中似乎被覆盖了。

Update Image Size

This action helps you to automate this process: simply place caret inside <img> tag and run this action to add/update width and height attributes.

In CSS, place caret inside property value with url() function to add/update width and height properties for current rule.

Evaluate Math Expression

3*4

Increment/Decrement Number

Reflect CSS Value

    -webkit-transform: rotate(60deg);

    -moz-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(45deg);

ctrl+B

    -webkit-transform: rotate(60deg);

    -moz-transform: rotate(60deg);

    -ms-transform: rotate(60deg);

    -o-transform: rotate(60deg);

    transform: rotate(60deg);

Encode/Decode Image to data:URL

body {

    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAARCAYAAADdRIy+AAAB0UlEQVQ4y2P4z8DAQCoGgjwgVsIqR46BwoJMt7i5GPeBmFQxUFWR5R6IycHOuB5Ii6C5niENiDORcAVID5ICDSCOB+IGIO4G4lwBPqY3MDOAhq5DNhTDkYL8TE+jArgcgGwWIC5iZ2O8TsjRnByMa4G0ENhARkaGf6JCTJ/rCviOg/DeFaKdz85IibCyMM4lJSSALl0Ld6GCDMszoCEaUMzFwszQSmrQ8nIzfgDqFQcbKC3B/BQpDFT4+Zieo2vg4mT8KSLE9AUYuz+BvkKRk5Vi/jC7S2gp0EApsIEykszPYLJaaqwZbGyMv0BckOYwH64r2xeJrrm0S2IGEPcC8TQ1JZZXMMM0VVhfbVsk2g80TAKIGTEM1NdinQliApPGmyWThJcDFXkDMQ+yk+SkmB+AmBZGbI9ObBKvAcpzo8QysoHGemwbgAofn9sGViiGLcCALrzrYMl+7+EJyRSgGmb0dIhiYGsZf+XRdWL5QIVMuGKgvpBvzp3DkvFQA3zwGggKWCBmxRelQHkVqOZ2YPL6iGGgvDTzYzILif+SYszvUcSYmRj+AnPDdyBzM6kYlHzERZnfYLiQEgwsed6hGAgMj/lADEqUK8jAS4C4A9lAAFHbei84vFYeAAAAAElFTkSuQmCC);

}

Filters

Now, try to expand this abbreviation: #content>p.title|e. You’ll have a slightly different result:

&lt;div id="content"&gt;

    &lt;p class="title"&gt;&lt;/p&gt;

&lt;/div&gt;

#content>p.title|e|e

&amp;lt;div id="content"&amp;gt;

    &amp;lt;p class="title"&amp;gt;&amp;lt;/p&amp;gt;

&amp;lt;/div&amp;gt;

#content>p.title|haml

#content

    %p.title

Implicit filter call

Default filters are defined in snippets.json file in filters section of each syntax:

{

    ...

    "html": {

        ...

        "filters": "html"

    }

}

Available filters

HAML syntax: `haml`

HTML syntax: `html`

Escape: `e`

Comment tags: `c`

div>div#page>p.title+p|c

...will be expanded into

<div>

    <div id="page">

        <p class="title"></p>

        <!-- /.title -->

        <p></p>

    </div>

    <!-- /#page -->

</div>

XSL tuning: `xsl`

Single line: `s`

ul>li*4|s

...will be expanded into

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

Trim line markers: `t`

Yandex BEM/OOCSS

Customization

snippets.json

Add your own or update existing snippets

preferences.json

Change behavior of some Emmet filters and actions

syntaxProfiles.json

Define how generated HTML/XML should look.

Cheat Sheet