Экономия времени с Emmet
Про Emmet (ранее zen coding), плагин позволяющий существенно ускорить процесс написания кода и html с css в частности, и его применение в консоли WordPress я уже писал ранее в заметке Emmet + WordPress.
Эта заметка что-то вроде шпаргалки-запоминалки наиболее удобных и применимых возможностей. Вся указанная ниже информация содержится в полном объеме на странице проекта – docs.emmet.io.
Пропускаем div
Emmet легко поймет запись такого вида:
.wrapper
И после нажатия настроенного сочетания клавиш превратит ее в:
<div class="wrapper"></div>
Хотя, конечно, можно написать и так:
div.wrapper
Оба варианта корректны, но при явном отсутствии названия элемента перед маркером класса или идентификатора, по умолчанию будет использовать div
.
Закономерные имена элементов
Аналогичным образом Emmet поступит и в этом случае:
.wrapper>ul.menu>.item
Однако, в данной записи, во втором случае отсутствия имени элемента перед маркером класса .item
, будет подставлен не div
, а li
. Т.е. плагин определит, что его родителем является ul
, значит, дочерним элементом будет li
.
<div class="wrapper"> <ul class="menu"> <li class="item"></li> </ul> </div>
Это справедливо для плагина текстового редактора, но не работает в javascript варианте, к сожалению.
Операторы
Дочерний
Для создания дочернего элемента используется знак >
. Пример:
.wrapper>.inner>p
Будет интерпретирован в:
<div class="wrapper"> <div class="inner"> <p></p> </div> </div>
Родственный
Для создания родственных элементов, т.е. элементов одного и того же уровня используется знак +
. Приведенный ранее пример, но с использованием знака +
:
.wrapper+.inner+p
в результате работы плагина будет выглядеть так:
<div class="wrapper"></div> <div class="inner"></div> <p></p>
Шаг наверх
Подняться наверх по структуре элементов можно с помощью знака ^
. Его работу можно легко понять по примеру:
div+div>p>span+em^bq
Который будет развернут в:
<div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div>
К сожалению, не работает в javascript версии, в ней будет развернут только последний элемент – blockquote
.
Дублирование
Часто требуется создать не один элемент, а несколько, например, для нумерованного списка требуется создать, скажем, 5 дочерних пунктов, это можно сделать так:
ol>li*5
Таким образом, мы, используя оператор *
создадим 5 дублей list item.
<ol> <li></li> <li></li> <li></li> <li></li> <li></li> </ol>
Так просто!
Группировка
Как поступить, если надо создать сложную структуру элементов, например, такую:
<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div>
Все просто, используем круглые скобки ( )
, т.е. так будет выглядеть сокращенная запись:
div>(header>ul>li*2>a)+footer>p
Попробуйте данные примеры самостоятельно, уверен, возможности Emmet придутся вам по вкусу!
Дополнение от 25.02.2013
Реализовал добавление Emmet в консоль WordPress в виде крохотного плагина, скачать и обсудить можно здесь Emmet WordPress плагин.