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