Прощай ZenCoding, привет Emmet

Ромчик
1

Доброго времени суток. В данной статье мы о “младшем брате” 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>

Тут хотелось бы отметить:

  1. Последовательность атрибутов ни на что не влияет.
  2. Можно использовать как одинарные, так и двойные кавычки для записи значения атрибута.
  3. Если значение атрибута не содержит пробела, то это значение можно не помещать в кавычки (как в примере выше значение атрибута 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  от разработчиков.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

  • Konstantin - 12.07.2013 в 09:58

    Отличный плагин, но я не считаю его «младшим братом» Zen-coding. По сути, Emmet это улучшенный Zen-coding. Получается нечто обновления Zen-coding, который просто был переименован

  • ©2012-2017 По всем вопросам обращайтесь через форму обратной связи

    Яндекс.Метрика