Abbreviations

Here’s an example: this abbreviation#page>div.logo+ul#navigation>li*5>a{Item $}

...can be transformed into<div id="page"> <div class="logo"></div> <ul id="navigation"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ul></div>

Abbreviations

Syntax

Abbreviations

ID and CLASSIn CSS, you use elem#id and elem.class notation to reach the elements with specified id or class attributes. In Emmet, you can use the very same syntax to add these attributes to specified element:

div#content.left

<div id="content" class="left"> </div>

Abbreviations

Child: >You can use > operator to nest elements inside each other:

div>ul>li

...will produce<div> <ul> <li></li> </ul></div>

Abbreviations

Sibling: +Use + operator to place elements near each other, on the same level:

div+p+sec

...will output<div></div><p></p><section></section>

Abbreviations

Climb-up: ^With ^ operator, you can climb one level up the tree and change context where following elements should appear:

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

...outputs to<div></div><div> <p><span></span><em></em></p> <blockquote></blockquote></div>

Abbreviations

Multiplication: *With * operator you can define how many times element should be outputted:

ul>li*5

...outputs to<ul> <li></li> <li></li> <li></li> <li></li> <li></li></ul>

Abbreviations

Text: {}You can use curly braces to add text to element:

a{Clique aqui}

...will produce

<a href="">Click me</a>

Abbreviations

Attribute Operators

Abbreviations

Item numbering: $With multiplication * operator you can repeat elements, but with $ you can number them. Place $ operator inside element’s name, attribute’s name or attribute’s value to output current number of repeated element:

ul>li.item-$*5...outputs to<ul> <li class="item-1"></li> <li class="item-2"></li> <li class="item-3"></li> <li class="item-4"></li> <li class="item-5"></li></ul>

CSS Abbreviations

h10 ...outputs to

height: 10px;

h10+w20

...outputs to

height: 10px; width: 20px;

CSS Abbreviations

Vendor Prefixes

CSS Abbreviations

-bdrs

...will be expanded into

-webkit-border-radius: ;-moz-border-radius: ;border-radius: ;

CSS Abbreviations

Gradients

CSS Abbreviations

lg(left,#fc0 30%, red)

...will be expanded into

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.3, #fc0), to(red));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(left, #fc0 30%, red);

CSS Abbreviations

Fuzzy search

Actions

Occasionally you have to edit your HTML and CSS code to fix bugs and add new features.

Actions

Update Image Size

Actions

Shift + Control + iUpdate image size:

<img src="mario.png" alt="It's me, Mario!"><img src="mario.png" alt="It's me, Mario!" width="256" height="256">

.image { background:url(mario.png); }

.image { background:url(mario.png); width:256px; height:256px; }

Actions

Evaluate Math Expression

Actions

Shift + Command + yEvaluate math expression:

12-210

20*4+1090

Actions

Increment/Decrement Number

Actions

Increment/Decrement Number

Increment by 1: Ctrl+↑Decrement by 1: Ctrl+↓

Increment by 0.1: Alt+↑Decrement by 0.1: Alt+↓

Increment by 10: Alt + Option ↑ Decrement by 10: Alt + Option ↓

Customization!

snippets.jsonAdd your own or update existing snippets;

preferences.jsonChange behavior of some Emmet filters and actions;

syntaxProfiles.jsonDefine how generated HTML/XML should look.

Links

DocumentationEmmet documentation;

Emmet for Sublime Text 2Emmet plugin and keymap for Sublime Text 2;

Cheat SheetList of all Emmet abbreviations.

THE END

Questions?

Thank you!

:)