Прощай ZenCoding, привет Emmet
Доброго времени суток. В данной статье мы о “младшем брате” Zen Coding — Emmet. Emmet пришел на смену Zen Coding. Emmet — это плагин для WEB-разработчиков, который призван ускорить рабочий процесс по написанию HTML и CSS кода.
Переход на Emmet не прост, а очень прост, т.к. использует CSS-подобные выражения. Давайте подробнее рассмотрим эти выражения.
Основа Emmet — это сокращения. Сокращения в Emmet — это специальные выражения, которые обрабатываются во время выполнения и превращаются в структурированный код. Например:
#page>div.logo+ul#navigation>li*5>a{Item $}
Обрабатывая эту запись мыполучаем:
<div id="page"> <div></div> <ul id="navigation"> <li><a href="">Item 1</a></li> <li><a href="">Item 2</a></li> <li><a href="">Item 3</a></li> <li><a href="">Item 4</a></li> <li><a href="">Item 5</a></li> </ul> </div>
Т.е. написание кода сокращается в разы. Синтаксис этих сокращений выглядит как селекторы CSS. В следствии чего переход на Emmet легок.
Элементы в Emmet
Можно использовать любое слово, которое в последствии обработки превратиться в тег. Например, написав:
test
После обработки получим:
<test></test>
Вложенность элементов
Для того, чтобы показать вложенность элементов используется >.
Так, например, введя:
div>ul>li
Мы получим:
<div> <ul> <li></li> </ul> </div>
Расположение элементов рядом
Очень часто приходиться располагать элементы рядом друг с другом на том же уровне. Для этого используется +.
div+p+bq
После обработки мы получим:
<div></div> <p></p> <blockquote></blockquote>
Расположение элемента на уровень выше
Иногда необходимо расположить элемент на уровень выше. В этом случае используется ^.
Например мы хотим получить следующий код:
<div></div> <div> <p><span></span><em></em></p> <blockquote></blockquote> </div>
Т.е. элемент blockquote должен располагаться на том же уровне, что и элемент p. Чтобы это получить в Emment используем символ ^
div+div>p>span+em^bq
Что мы сделали? Расположили элемент div, на том же уровне расположили еще один элемент div в котором находиться элемент p. А элементе p находятся на одном уровне элементы span и em. Дальше мы помещаем элемент blockquote, который располагаем на уровень выше, чем элемент em, соответственно наш blockquote будет находиться на одном уровне с элементом p. Фуф, надеюсь понятно расписал, вот схема:
— div
— div
— p
— span
— em
— blockquote
А если нам надо расположить элемент на несколько уровней выше? Тогда мы используем ^ столько раз, сколько нам необходимо.
Пример:
div+div>p>span+em^^^bq
И вот, что получили:
<div></div> <div> <p><span></span><em></em></p> </div> <blockquote></blockquote>
Умножение
А если нам надо, чтобы элемент несколько раз повторился, что несколько раз писать этот элемент? Где оптимизация написания кода? В Emmet есть для такого случая специальная операция умножения, которая обозначается *. Пишем элемент и множаем его на столько, сколько раз он должен повториться.
Пример:
ul>li*5
В итоге получаем:
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
Вот, как видите и оптимизация, и удобство. Думаю, что не сложно.
Группировка элементов в Emmet
Очень часто необходимо сгруппировать несколько элементов. Для этого используются скобки. Давайте сразу рассмотрим пример:
div>(header>ul>li*2>a)+footer>p
И получаем:
<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer> <p></p> </footer> </div>
Как легче всего понять группировку элементов? Просто представляйте сгруппированные элементы как один элемент и тогда будет ясно, что получиться в итоге.
Что мы можем делать с группами элементов? Ну во-первых в группу мы можем вложить еще одну группу. А во-вторых, если есть необходимость в повторе группы несколько раз, то к группе мы можем применить умножение.
Пример:
(div>dl>(dt+dd)*3)+footer>p
Получаем:
<div> <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> </div> <footer> <p></p> </footer>
С элементами мы научились работать, но нам необходимо и добавлять к элементам различные атрибуты.
Атрибуты id и class
Тут все просто вспомним CSS. ID обозначается #, а class — . (точка). Так и в Emmet.
Пример:
div#header+div.page+div#footer.class1.class2.class3
Получаем:
<div id="header"></div> <div></div> <div id="footer"></div></p>
Пользовательские атрибуты
Например мы хоти к элементу td добавить атрибут titlt= “Hello world!” и атрибут colspan=”3”. Для того, чтобы добавить к элементу атрибут (или атрибуты) в Emmet используются квадратные скобки.
Например:
td[title="Hello world!" colspan=3]
Мы получаем:
<td title="Hello world!" colspan="3"></td>
Тут хотелось бы отметить:
- Последовательность атрибутов ни на что не влияет.
- Можно использовать как одинарные, так и двойные кавычки для записи значения атрибута.
- Если значение атрибута не содержит пробела, то это значение можно не помещать в кавычки (как в примере выше значение атрибута colspan)
Нумерация
Сразу перейду к примеру, что надо написать для Emmet, чтобы получить следующее:
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
Как видите с элементом ul вообще проблем нет, да и с повторяющимся 5 раз элементом li тоже нет (применим умножение), но вот как этим элементам li присвоить атрибуту class перечисление? Для перечисления элементов в Emmet служит знак $. И для того, чтобы получить выше приведенный код необходимо записать:
ul>li.item$*5
Вот, как просто. Но мы можем использовать несколько символов $ подряд. Например:
ul>li.item$$$*5
Получим:
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
А что делать если нам необходимо изменить нумерацию (например начрнать не с 1, а с3) или изменить порядок нумерации?
Изменение нумерации и порядка
Для того, чтобы изменить нумерацию или изменить порядок нумерации в Emmet служит символ @, после нешо ставиться знак — (минус), если нумерация идет от большего к меньшему, а дальше ставиться число с которого начинать нкмерацию.
Например:
ul>li.item$@-*5
Получим:
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
Или:
ul>li.item$@-3*5
Тогда получим:
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
Текст
Очень часто необходимо вставить текст. Например анкор ссылки. Для вставки текста элементу в Emmet используются фигурные скобки {}.
Пример:
a{Click me}
Получаем:
<a href="">Click me</a>
Вот в принципе и все. Я постарался рассказать основы использования Emmet, который пришел на смену столь замечательному Zen Coding. Если Вы хотите более детально изучить Emmet, то Вам сюда. А вот шпаргалка по Emmet от разработчиков.
Отличный плагин, но я не считаю его «младшим братом» Zen-coding. По сути, Emmet это улучшенный Zen-coding. Получается нечто обновления Zen-coding, который просто был переименован