
Emmet, шпаргалка сокращений. Шорткоды
Emmet – плагин, с которым быстрее писать HTML и CSS код при помощи различных команд. Здесь собраны основные сокращения и варианты их применения.
Можете добавить статью в закладки и использовать как шпаргалку. До тех пор, пока сокращения не закрепятся в мозгу, чтобы использовать их на автомате.
Если плагин не установлен, посмотрите инструкцию «как установить 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.