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

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

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

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

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

Элементы

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

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

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

Спуск

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

Результат:

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

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

Результат:

Подъём

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

Результат:

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

Результат:

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

Результат:

Умножение

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

Результат:

Группировка

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

Результат:

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

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

Результат:

Работа с атрибутами

ID и CLASS

Для добавления атрибутов id и class используйте css-подобный синтаксис сокращений:

Результат:

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

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

Результат:

Ссылки

• Документация Emmet.