Emmet, шпаргалка сокращений. Шорткоды

Можете добавить статью в закладки и использовать как шпаргалку. До тех пор, пока сокращения не закрепятся в мозгу, чтобы использовать их на автомате.

Если плагин не установлен, посмотрите инструкцию «как установить Emmet»

Рассмотрим все шорткоды по порядку.

Вложенность, >

Первое, что пригодится — это вложенность.
С помощью знака > задается порядок вложенности элементов друг в друга.

Например, нужно, чтобы внутри ul был тег li, а внутри li — ссылка.

ul>li>a

Нажали Tab, получили готовую вёрстку.
Список, внутри которого li, внутри которого a.

<ul>
  <li><a href=""></a></li>
</ul>

Соседство, +

Чтобы прописать элементы рядом, используется знак +

h2+p

Заголовок и параграф ложатся на одном уровне.

<h2></h2>
<p></p>

Свойства можно комбинировать.
Например, чтобы теги были внутри div, нужно использовать знак > для вложенности, а внутри прописать заголовок и параграф через +.

div>h2+p

<div>
  <h2></h2>
  <p></p>
</div>

Умножение, *

С помощью символа * можно задать количество однотипных пунктов.

Например, чтобы внутри списка было 3 пункта, необходимо задать нужное количество и нажать Tab

ul>li*3

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

Группирование, ()

Рассмотрим конструкцию сложнее. Есть article, внутри которого две секции, внутри которых заголовок и параграф. Обернём секцию скобками и умножим на 2. Всё как в математике.

article>(section>h2+p)*2

С помощью такого шорткода получили секции на одном уровне, а внутри каждой нужное наполение.

<article>

  <section>
    <h2></h2>
    <p></p>
  </section>

  <section>
    <h2></h2>
    <p></p>
  </section>

</article>

Подъём на уровень выше, ^

Конкретно эта задача выполняется другим путём, используя знак ^ — он же циркумфлекс. Или, попросту, «домик».

Есть article, внутри которого section, внутри которого создаётся заголовок и параграф.

Поднимаемся на уровень выше относительно последних тегов. И снова оказываемся на одном уровне с тегом section.

article>section>h2+p^section>h2+p

В результате — точно такой же код. Секции на одном уровне.

<article>

  <section>
    <h2></h2>
    <p></p>
  </section>

  <section>
    <h2></h2>
    <p></p>
  </section>

</article>

Подниматься можно сразу на несколько уровней выше, используя несколько циркумфлексов подряд.

article>section>h2+p^^section>h2+p

Теперь вторая секция будет на одном уровне с article.

<article>
  <section>
    <h2></h2>
    <p></p>
  </section>
</article>

<section>
  <h2></h2>
  <p></p>
</section>

Селекторы,. #

Используя точку — ., как в записи CSS, присваиваем тегу класс.

h2.title

<h2 class="title"></h2>

Аналогично, если использовать #, получаем тег с прописанным идентификатором.

h2#title

<h2 id="title"></h2>

Атрибуты, []

С помощью квадратных скобок можно задавать любые атрибуты.

h2[role=title]

<h2 role="title"></h2>

Вставка текста, {}

При помощи фигурных скобок можно прописать текст, который отобразится внутри тега.

h2{title text}

<h2>title text</h2>

Рыбный текст, lorem

Если нужно заполнить блок произвольным текстом, например, чтобы проверить на перенаполнение, пригодится так называемый «рыбный текст». В Emmet это реализовывается вводом слова «lorem».

p>lorem

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, delectus suscipit accusamus. Ullam impedit ad animi repudiandae ex, alias quod quos voluptates repellendus, harum tenetur nemo voluptatum odio temporibus optio!</p>

По-умолчанию добавится абзац. Но можно задать и конкретное количество слов.

p>lorem5

<p>Lorem ipsum dolor sit amet.</p>

Нумерация, $

Так же можно задать тексту или классам порядковый номер, используя символ $

ul>li{item-$}*3

c<ul>
  <li>item-1</li>
  <li>item-2</li>
  <li>item-3</li>
</ul>

Нумерация может быть усложнённой, если прописать несколько $ подряд.

ul>li{item-$}*3

<ul>
  <li>item-001</li>
  <li>item-002</li>
  <li>item-003</li>
</ul>

Неявные имена тегов

В Emmet есть такая штука, как «неявные имена тегов». Она заключается в том, что плагин умеет подставлять нужные теги, исходя из семантики.

Например, если задать класс и не указывать тег, то создастся div, блочный элемент.

.title

<div class="title"></div>

Если класс без тега указать внутри ссылки, создастся span, строчный элемент.

a>.title

 <a href=""> <span class="title"> </span> </a>

Потому что ссылка — это строчный элемент и внутри создается так же строчный. Так как внутри строчного элемента не может быть блочного.

И так будет с любым строчным элементом. Например, em или span.

Внутри header создастся div.
То есть, внутри блочных будет создаваться div, внутри строчных — span.

Внутри списка — пункт списка.

Аналогично с table. Если не указывать тег внутри, то создастся строка. А если сделать два уровня вложенности, то Emmet поймёт, что вторым тегом должна быть ячейка.

CSS Шорткоды

Похожим образом, используя сокращения, можно писать и CSS.

Например, указать margin 10px и padding 10px

body {
  p10+m10
}

body {
	padding: 10px;
	margin: 10px;
}

Или комбинировать. Padding 10px, а у margin несколько значений: cверху и снизу по 10 пикселей, а по бокам 10%.

body {
  p10+m10-10p
}

body {
	padding: 10px;
	margin: 10px 10%;
}

Рекомендую почитать документацию плагина Emmet. В ней собраны все сокращения для HTML и CSS.