Эммет использует синтаксис, аналогичный селекторам CSS, для описания позиций элементов внутри сгенерированного дерева и атрибутов элементов.
Элементы
Вы можете использовать имена элементов, такие как divили p, для создания тегов HTML. В Emmet нет предопределенного набора доступных имен тегов, вы можете написать любое слово и преобразовать его в тег: div→ <div></div>, foo→ <foo></foo>и так далее.
Вложенные операторы
Операторы вложения используются для позиционирования элементов аббревиатуры внутри сгенерированного дерева: должно ли оно быть помещено внутри или рядом с элементом контекста.
Ребенок:>
Вы можете использовать >оператор для вложения элементов друг в друга:
div>ul>li
...будет производить
<div> <ul> <li></li> </ul> </div>
Родственники:+
Используйте +оператор для размещения элементов рядом друг с другом на одном уровне:
div+p+bq
...будет выводить
<div></div> <p></p> <blockquote></blockquote>
Подъём:^
С >оператором вы спускаетесь вниз по сгенерированному дереву, и позиции всех родственных элементов будут разрешены относительно самого глубокого элемента:
div+div>p>span+em
...будет расширен до
<div></div> <div> <p><span></span><em></em></p> </div>
С ^оператором вы можете подняться на один уровень вверх по дереву и изменить контекст, в котором должны появиться следующие элементы:
div+div>p>span+em^bq
...выводит на
<div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div>
Вы можете использовать столько ^операторов, сколько хотите, каждый оператор переместится на один уровень вверх:
div+div>p>span+em^^^bq
...будет выводиться в
<div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote>
Умножение:*
С помощью *оператора вы можете определить, сколько раз элемент должен быть выведен:
ul>li*5
...выводит на
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
Группировка:()
Скобки используются опытными пользователями Emmets для группировки поддеревьев в сложные сокращения:
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>
Если вы работаете с DOM браузера, вы можете думать о группах как о фрагментах документа: каждая группа содержит поддерево аббревиатуры, и все последующие элементы вставляются на том же уровне, что и первый элемент группы.
Вы можете вкладывать группы друг в друга и объединять их *оператором умножения:
(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>
С группами вы можете буквально написать всю разметку страницы с помощью одной аббревиатуры, но, пожалуйста, не делайте этого.
Операторы атрибутов
Операторы атрибутов используются для изменения атрибутов выходных элементов. Например, в HTML и XML вы можете быстро добавить classатрибут к сгенерированному элементу.
ID и КЛАСС
В CSS вы используете нотацию elem#idи elem.classдля доступа к элементам с указанными атрибутами idили . classВ Emmet вы можете использовать тот же синтаксис для добавления этих атрибутов к указанному элементу:
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>
Пользовательские атрибуты
Вы можете использовать [attr]нотацию (как в CSS) для добавления пользовательских атрибутов к вашему элементу:
td[title="Hello world!" colspan=3]
...выводит
<td title="Hello world!" colspan="3"></td>
- Вы можете поместить в квадратные скобки столько атрибутов, сколько хотите.
- Вам не нужно указывать значения атрибутов:
td[colspan title]будет производиться<td colspan="" title="">с табуляциями внутри каждого пустого атрибута (если ваш редактор их поддерживает). - Вы можете использовать одинарные или двойные кавычки для цитирования значений атрибутов.
- Вам не нужно заключать в кавычки значения, если они не содержат пробелов:
td[title=hello colspan=3]сработает.
Нумерация позиций:$
С оператором умножения *вы можете повторять элементы, а с помощью $вы можете их нумеровать . Поместите $оператор внутри имени элемента, имени атрибута или значения атрибута, чтобы вывести текущее количество повторяющихся элементов:
ul>li.item$*5
...выводит на
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>
Вы можете использовать несколько $подряд, чтобы заполнить число нулями:
ul>li.item$$$*5
...выводит на
<ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul>
Изменение базы и направления нумерации
С помощью @модификатора вы можете изменить направление нумерации (по возрастанию или по убыванию) и основание (например, начальное значение).
Например, чтобы изменить направление, добавьте @-после $:
ul>li.item$@-*5
…выводит на
<ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul>
Чтобы изменить базовое значение счетчика, добавьте @Nмодификатор к $:
ul>li.item$@3*5
…превращается в
<ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul>
Вы можете использовать эти модификаторы вместе:
ul>li.item$@-3*5
… превращается в
<ul> <li class="item7"></li> <li class="item6"></li> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> </ul>
Текст:{}
Вы можете использовать фигурные скобки, чтобы добавить текст к элементу:
a{Click me}
...будет производить
<a href="">Click me</a>
Обратите внимание, что {text}используется и анализируется как отдельный элемент (например, divи pт. д.), но имеет особое значение, если пишется сразу после элемента. Например, a{click}и a>{click}выдаст тот же вывод, но a{click}+b{here}и a>{click}+b{here}не будет:
<!-- a{click}+b{here} --> <a href="">click</a><b>here</b> <!-- a>{click}+b{here} --> <a href="">click<b>here</b></a>
Во втором примере <b>элемент помещается внутри <a> элемента. И в этом разница: когда {text}он пишется сразу после элемента, он не меняет родительский контекст. Вот более сложный пример, показывающий, почему это важно:
p>{Click }+a{here}+{ to continue}
... производит
<p>Click <a href="">here</a> to continue</p>
В этом примере для записи Click here to continueвнутри <p>элемента мы явно перемещаемся вниз по дереву с помощью >оператора после p, но в случае с aэлементом нам не нужно этого делать, так как нам нужен <a>элемент hereтолько со словом, без изменения родительского контекста.
Для сравнения, вот та же аббревиатура, написанная без дочернего >оператора:
p{Click }+a{here}+{ to continue}
... производит
<p>Click </p> <a href="">here</a> to continue
Примечания по форматированию сокращений
Когда вы познакомитесь с синтаксисом аббревиатур Emmet, вы можете захотеть использовать некоторое форматирование, чтобы сделать ваши аббревиатуры более читабельными. Например, используйте пробелы между элементами и операторами, например:
(header > ul.nav > li*5) + footer
Но это не сработает, потому что пробел — это символ остановки , на котором Эммет останавливает разбор аббревиатуры.