Продолжим рассматривать синтаксис сокращений Emmet.
Нумерация
Оператор умножения *
создаёт повторяющиеся элементы, а спецсимвол $
генерирует нумерацию. Поместите $
в имя элемента или имя атрибута:
1 |
ul>li.item$*5 |
Результат:
1 2 3 4 5 6 7 |
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul> |
Несколько символов $
добавляют лидирующие нули:
1 |
ul>li.item$$$*5 |
Результат:
1 2 3 4 5 6 7 |
<ul> <li class="item001"></li> <li class="item002"></li> <li class="item003"></li> <li class="item004"></li> <li class="item005"></li> </ul> |
Для изменения направления нумерации (по возрастанию, по убыванию) и начального значения используйте оператор @
после $
. Порядок меняется символом минуса:
1 |
ul>li.item$@-*5 |
Результат
1 2 3 4 5 6 7 |
<ul> <li class="item5"></li> <li class="item4"></li> <li class="item3"></li> <li class="item2"></li> <li class="item1"></li> </ul> |