Синтаксис сокращений Emmet. Часть 1 | Way23

Синтаксис сокращений Emmet. Часть 1

Emmet преобразует сокращения в структурированные блоки кода, например, в HTML. Синтаксис сокращений похож на селекторы CSS с дополнениями для генерации кода. Например, скрещение

#page>div.logo+ul#navigation>li*5>a{Item $}
1

преобразуется в следующий код

<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>
1
2
3
4
5
6
7
8
9
10

после нажатия одной клавиши. Дополнительно, плагины для большинства редакторов поддерживаются перемещение между заданными точками в сгенерированном коде по горячей главиши.

Сокращения оптимизированы, но не ограничены, для генерации HTML и XML. Рассмотрим синтаксис сокращений.

Элементы

Используйте имена элементов такие как div или p для генерации тегов HTML. Emmet не содержит заданного разрешенного списка имён тегов, используйте любые имена.

div -> <div></div>
foo -> <foo></foo>
1
2

Операторы позиционирования

Операторы позиционирования используются для перемещения по генерируемому дереву элементов.

Спуск

Используйте > для создания вложенных элементов:

div>ul>li
1

Результат:

<div>
    <ul>
        <li></li>
    </ul>
</div>
1
2
3
4
5

Элементы одного уровня

Используйте + для добавления элементов на одном уровне:

div+p+bq
1

Результат:

<div></div>
<p></p>
<blockquote></blockquote>
1
2
3

Подъём

При использовании > все новые элементы будут создаваться на одном, самом глубоком уровне вложенности:

div+div>p>span+em 
1

Результат:

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
1
2
3
4

Используйте ^ чтобы вернуться на более высокий уровень вложенности и добавить элемент в него:

div+div>p>span+em^bq
1

Результат:

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>
1
2
3
4
5

Используйте несколько операторов ^ подряд для возвращения на корневой уровень:

div+div>p>span+em^^bq
1

Результат:

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>
1
2
3
4
5

Умножение

Используйте * для создания нескольких элементов:

ul>li*5
1

Результат:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
1
2
3
4
5
6
7

Группировка

Используйте () для группировки поддеревьев в сложных сокращениях:

div>(header>ul>li*2>a)+footer>p
1

Результат:

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>
1
2
3
4
5
6
7
8
9
10
11

Изменения уровня вложенности внутри группы распространяется только в границах этой группы.

Допускаются вложенные группы и применение оператора * к группам:

(div>dl>(dt+dd)*3)+footer>p
1

Результат:

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>
1
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
1

Результат:

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
1
2
3

Другие атрибуты

Используйте нотацию [attr] для задания любых атрибутов:

td[title="Hello world!" colspan=3]
1

Результат:

<td title="Hello world!" colspan="3"></td>
1

Ссылки

Последниее изменение: 31.08.2021, 15:52:51