Abr@X@bra.ru
Знакомимся с Emmet

Знакомимся с Emmet

17.09.2018
76
Данный плагин интересен, помимо всего прочего, тем, что написан на любимом всем фронтенд разработчикам языке JavaScript и потому хорошо переносим между различными платформами. Сейчас он представлен практически для всех известных IDE: Eclipse, Sublime Text 2, TextMate, Coda и пр.

Давайте просто напишем в редакторе div, нажмём tab (для Sublime Text 2, в вашем редакторе может быть и другая клавиша) и получим:


<div></div>

Или, допустим, мы хотим создать ненумерованный список из 5 элементов, для этого пишем:ul>li*5

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

Работа с классами, дивами (элемент по умолчанию) и структурой также довольно проста. Создадим небольшой лэйаут:
<div class="container">
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</div>

Или то же самое, но в стиле html5:

<div class="container">
<header></header>
<div class="main"></div>
<footer></footer>
</div>

Emmet прямо-таки читает наши мысли! К примеру, если мы напишем просто

<a href=""></a>

Т.е. атрибут href дописывать не придется — Emmet обо всём позаботился за нас.

А как насчёт счетчика нумерации? И можно ли помещать текст внутри тегов? Давайте рассмотрим пример сложнее:

ul#nav>li.item$*4>a{Item $}

Нажимает tab
<ul id="nav">
<li class="item1"><a href="">Item 1</a></li>
<li class="item2"><a href="">Item 2</a></li>
<li class="item3"><a href="">Item 3</a></li>
<li class="item4"><a href="">Item 4</a></li>
</ul>




Источник: loftblog

Emmet, HTML
Читайте также:
CSS font-display: будущее рендеринга шрифтов

CSS font-display: будущее рендеринга шрифтов

Одним из недостатков использования веб-шрифтов является то, что если шрифт не доступен на устройстве пользователя, его н...
Читать
Canvas – HTML5. Подробное руководство

Canvas – HTML5. Подробное руководство

Canvas с его обманчиво простым API может революционно преобразовать создание веб-приложений для всех устройств, а не тол...
Читать
3 новых CSS-функции для изучения в 2017 году

3 новых CSS-функции для изучения в 2017 году

В этом посте, поговорить хочу про CSS, а если быть точнее про новые его фишки которые стоить знать.
Читать