Синтаксис сокращений Emmet. Часть 1
Emmet преобразует сокращения в структурированные блоки кода, например, в HTML. Синтаксис сокращений похож на селекторы CSS с дополнениями для генерации кода. Например, скрещение
#page>div.logo+ul#navigation>li*5>a{Item $}
преобразуется в следующий код
<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>
2
3
4
5
6
7
8
9
10
после нажатия одной клавиши. Дополнительно, плагины для большинства редакторов поддерживаются перемещение между заданными точками в сгенерированном коде по горячей главиши.
Сокращения оптимизированы, но не ограничены, для генерации HTML и XML. Рассмотрим синтаксис сокращений.
Элементы
Используйте имена элементов такие как div или p для генерации тегов HTML. Emmet не содержит заданного разрешенного списка имён тегов, используйте любые имена.
div -> <div></div>
foo -> <foo></foo>
2
Операторы позиционирования
Операторы позиционирования используются для перемещения по генерируемому дереву элементов.
Спуск
Используйте > для создания вложенных элементов:
div>ul>li
Результат:
<div>
<ul>
<li></li>
</ul>
</div>
2
3
4
5
Элементы одного уровня
Используйте + для добавления элементов на одном уровне:
div+p+bq
Результат:
<div></div>
<p></p>
<blockquote></blockquote>
2
3
Подъём
При использовании > все новые элементы будут создаваться на одном, самом глубоком уровне вложенности:
div+div>p>span+em
Результат:
<div></div>
<div>
<p><span></span><em></em></p>
</div>
2
3
4
Используйте ^ чтобы вернуться на более высокий уровень вложенности и добавить элемент в него:
div+div>p>span+em^bq
Результат:
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
2
3
4
5
Используйте несколько операторов ^ подряд для возвращения на корневой уровень:
div+div>p>span+em^^bq
Результат:
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
2
3
4
5
Умножение
Используйте * для создания нескольких элементов:
ul>li*5
Результат:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
2
3
4
5
6
7
Группировка
Используйте () для группировки поддеревьев в сложных сокращениях:
div>(header>ul>li*2>a)+footer>p
Результат:
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
2
3
4
5
6
7
8
9
10
11
Изменения уровня вложенности внутри группы распространяется только в границах этой группы.
Допускаются вложенные группы и применение оператора * к группам:
(div>dl>(dt+dd)*3)+footer>p
Результат:
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
2
3
4
5
6
7
8
9
10
11
12
13
Работа с атрибутами
ID и CLASS
Для добавления атрибутов id и class используйте css-подобный синтаксис сокращений:
div#header+div.page+div#footer.class1.class2.class3
Результат:
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
2
3
Другие атрибуты
Используйте нотацию [attr] для задания любых атрибутов:
td[title="Hello world!" colspan=3]
Результат:
<td title="Hello world!" colspan="3"></td>