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

Продолжим рассматривать синтаксис сокращений Emmet.

Нумерация

Оператор умножения * создаёт повторяющиеся элементы, а спецсимвол $ генерирует нумерацию. Поместите $ в имя элемента или имя атрибута:

Результат:

Несколько символов $ добавляют лидирующие нули:

Результат:

Для изменения направления нумерации (по возрастанию, по убыванию) и начального значения используйте оператор @ после $. Порядок меняется символом минуса:

Результат

Начальное значение задаётся в формате @n:

Результат:

Изменения порядка и начального значения работают вместе:

Результат:

Текст

Для добавления текста используйте фигурные скобки {}:

Результат:

Emmet рассматривает {text} как отдельный элемент, но с особым значением, если он идёт сразу после другого элемента. Например, a{click} и a>{click} генерируют одинаковый код, а a{click}+b{here} и a>{click}+b{here} разный:

Во втором примере элемент <b> располагается внутри элемента <a>. И это и есть отличие: если {text} располагается сразу за элементом, то контекст не меняется, несмотря на то что текст помещается внутрь элемента. Боле сложный пример:

Результат:

В этом примере, для того чтобы поместить Click внутрь <p> в явном виде применен оператор > поэтому и все последующие элементы так же располагаются внутри <p>.

Для примера, то же сокращение без оператора >:

Результат:

Советы

Сокращения не могут содержать пробелы, следующее сокращение не сработает:

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

Сокращения это не язык шаблонов, читаемость не всегда важна, важнее скорость их печати.

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

Неявные имена тегов

В некоторых случаях, вместо введения полного имени тега вы можете пропустить имя тега, а Emmet вставит его исходя из контекста. Например, вместо div.content введите .content и это сокращение будет заменено на <div class="content"></div>.

Рассмотрим пример

Исходя из контекста, .item01 будет преобразован в элемент div, .item02 в элемент span, а .item03 в элемент li.

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

  • li для ul и ol
  • tr для table, tbody, thead и tfoot
  • td для tr
  • option для 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.

Пример сгенерированного текста:

Сокращения для генерации текста работают совместно с оператором умножения:

Результат:

Ссылки

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *