Added Emmet cheatsheet (#737)
* Added Emmet cheatsheet * Oops, forgot prism_lanugages property
This commit is contained in:
parent
d77bc9e67a
commit
c695eb7add
|
@ -0,0 +1,175 @@
|
||||||
|
---
|
||||||
|
title: Emmet
|
||||||
|
category: Markup
|
||||||
|
layout: 2017/sheet
|
||||||
|
prism_languages: [html]
|
||||||
|
---
|
||||||
|
|
||||||
|
### Child: >
|
||||||
|
|
||||||
|
```
|
||||||
|
nav>ul>li
|
||||||
|
```
|
||||||
|
Expands to
|
||||||
|
```html
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
### Sibling: +
|
||||||
|
|
||||||
|
```
|
||||||
|
section>p+p+p
|
||||||
|
```
|
||||||
|
Expands to
|
||||||
|
```html
|
||||||
|
<section>
|
||||||
|
<p></p>
|
||||||
|
<p></p>
|
||||||
|
<p></p>
|
||||||
|
</section>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Climb Up: ^
|
||||||
|
|
||||||
|
```
|
||||||
|
section>header>h1^footer
|
||||||
|
```
|
||||||
|
Expands to
|
||||||
|
```html
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<h1></h1>
|
||||||
|
</header>
|
||||||
|
<footer></footer>
|
||||||
|
</section>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Grouping: ()
|
||||||
|
|
||||||
|
```
|
||||||
|
section>(header>nav>ul>li)+footer>p
|
||||||
|
```
|
||||||
|
Expands to
|
||||||
|
```html
|
||||||
|
<section>
|
||||||
|
<header>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<footer>
|
||||||
|
<p></p>
|
||||||
|
</footer>
|
||||||
|
</section>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Multiplication: \*
|
||||||
|
|
||||||
|
```
|
||||||
|
ul>li*3
|
||||||
|
```
|
||||||
|
Expands to
|
||||||
|
```html
|
||||||
|
<ul>
|
||||||
|
<li></li>
|
||||||
|
<li></li>
|
||||||
|
<li></li>
|
||||||
|
</ul>
|
||||||
|
```
|
||||||
|
|
||||||
|
### IDs and Classes: . #
|
||||||
|
|
||||||
|
```
|
||||||
|
ul.menu>li.menu__item+li#id_item+li.menu__item#id_2
|
||||||
|
```
|
||||||
|
Expands to
|
||||||
|
```html
|
||||||
|
<ul>
|
||||||
|
<li class="menu__item"></li>
|
||||||
|
<li id="id_item"></li>
|
||||||
|
<li class="menu__item" id="id_2"></li>
|
||||||
|
</ul>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Numbering: $
|
||||||
|
|
||||||
|
```
|
||||||
|
ul>li.item$*3
|
||||||
|
ul>li.item$$*3
|
||||||
|
ul>li.item$@-*3
|
||||||
|
ul>li.item$@3*5
|
||||||
|
```
|
||||||
|
Expands to
|
||||||
|
```html
|
||||||
|
<ul>
|
||||||
|
<li class="item1"></li>
|
||||||
|
<li class="item2"></li>
|
||||||
|
<li class="item3"></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="item01"></li>
|
||||||
|
<li class="item02"></li>
|
||||||
|
<li class="item03"></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="item3"></li>
|
||||||
|
<li class="item2"></li>
|
||||||
|
<li class="item1"></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li class="item3"></li>
|
||||||
|
<li class="item4"></li>
|
||||||
|
<li class="item5"></li>
|
||||||
|
</ul>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Attributes: []
|
||||||
|
|
||||||
|
```
|
||||||
|
input[type="text"]
|
||||||
|
div[data-attr="test"]
|
||||||
|
```
|
||||||
|
Expands to
|
||||||
|
```html
|
||||||
|
<input type="text" />
|
||||||
|
<div data-attr="test"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Text: {}
|
||||||
|
|
||||||
|
```
|
||||||
|
p{Lorem ipsum}
|
||||||
|
```
|
||||||
|
Expands to
|
||||||
|
```html
|
||||||
|
<p>Lorem ipsum</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Implicit tags
|
||||||
|
|
||||||
|
```
|
||||||
|
.default-block
|
||||||
|
em>.default-inline
|
||||||
|
ul>.default-list
|
||||||
|
table>.default-table-row>.default-table-column
|
||||||
|
```
|
||||||
|
Expands to
|
||||||
|
```html
|
||||||
|
<div class="default-block"></div>
|
||||||
|
<em><span class="default-inline"></span></em>
|
||||||
|
<ul>
|
||||||
|
<li class="default-list"></li>
|
||||||
|
</ul>
|
||||||
|
<table>
|
||||||
|
<tr class="default-table-row">
|
||||||
|
<td class="default-table-column"></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
```
|
Loading…
Reference in New Issue