Синтаксис сокращений Emmet. Часть 2
Продолжим рассматривать синтаксис сокращений Emmet.
Нумерация
Оператор умножения * создаёт повторяющиеся элементы, а спецсимвол $ генерирует нумерацию. Поместите $ в имя элемента или имя атрибута:
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>
2
3
4
5
6
7
Несколько символов $ добавляют лидирующие нули:
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>
2
3
4
5
6
7
Для изменения направления нумерации (по возрастанию, по убыванию) и начального значения используйте оператор @ после $. Порядок меняется символом минуса:
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>
2
3
4
5
6
7
Начальное значение задаётся в формате @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>
2
3
4
5
6
7
Изменения порядка и начального значения работают вместе:
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>
2
3
4
5
6
7
Текст
Для добавления текста используйте фигурные скобки {}:
a{Click me}
Результат:
<a href="">Click me</a>
Emmet рассматривает {text} как отдельный элемент, но с особым значением, если он идёт сразу после другого элемента. Например, 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>
2
3
4
5
Во втором примере элемент <b> располагается внутри элемента <a>. И это и есть отличие: если {text} располагается сразу за элементом, то контекст не меняется, несмотря на то что текст помещается внутрь элемента. Боле сложный пример:
p>{Click }+a{here}+{ to continue}
Результат:
<p>Click <a href="">here</a> to continue</p>
В этом примере, для того чтобы поместить Click внутрь <p> в явном виде применен оператор > поэтому и все последующие элементы так же располагаются внутри <p>.
Для примера, то же сокращение без оператора >:
p{Click }+a{here}+{ to continue}
Результат:
<p>Click </p>
<a href="">here</a> to continue
2
Советы
Сокращения не могут содержать пробелы, следующее сокращение не сработает:
(header > ul.nav > li*5) + footer
Сокращения не обязательно должны начинаться с новой строки, вы можете писать сокращения в любом месте текста.
Сокращения это не язык шаблонов, читаемость не всегда важна, важнее скорость их печати.
Не стремитесь написать одно большое сокращение для всего кода, эффективнее использовать несколько небольших сокращений, чем одно крупное. Небольшие сокращения быстрее написать и в них сложнее допустить ошибку.
Неявные имена тегов
В некоторых случаях, вместо введения полного имени тега вы можете пропустить имя тега, а Emmet вставит его исходя из контекста. Например, вместо div.content введите .content и это сокращение будет заменено на <div class="content"></div>.
Рассмотрим пример
<body>
<div>
.item01
</div>
<span>.item02</span>
<ul class="nav">
.item03
</ul>
</body>
2
3
4
5
6
7
8
9
10
11
Исходя из контекста, .item01 будет преобразован в элемент div, .item02 в элемент span, а .item03 в элемент li.
Ниже список имен тегов для которых это работает, в зависимости от родительских тегов:
liдляulиoltrдляtable,tbody,theadиtfoottdдляtroptionдляselectиoptgroup
Следующие сокращения с явными и не явными именами эквивалентны
| Без имён | Заданные имена |
|---|---|
.wrap>.content | div.wrap>div.content |
em>.info | em>span.info |
ul>.item*3 | ul>li.item*3 |
table>#row$*4>[colspan=2] | table>tr#row$*4>td[colspan=2] |
Генератор «Lorem Ipsum»
Для генерации случайного текста используйте сокращения lorem или lipsum. По умолчанию текст состоит из 30 слов. Количество слов меняется цифрой после сокращения, например, lorem100.
Пример сгенерированного текста:
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, nemo, et, minima ea libero architecto similique repellendus deleniti impedit amet fugiat eaque a? Natus, provident dicta harum voluptate voluptatibus nulla.
Сокращения для генерации текста работают совместно с оператором умножения:
p*4>lorem5
Результат:
<p>Lorem ipsum dolor sit amet.</p>
<p>Libero, quos veniam dolores dolor.</p>
<p>Perferendis, quia suscipit est cumque.</p>
<p>Ratione, accusantium, modi. Quidem, perspiciatis!</p>
2
3
4