Главная

Webmacter V.2 Всё для вебмастера » Уроки по CSS » Знакомимся с Emmet (ex Zen-Coding)

Знакомимся с Emmet (ex Zen-Coding)

Знакомимся с Emmet (ex Zen-Coding)


Всем привет! В этой статье мы с вами познакомимся с одним из наиболее популярных плагинов, предназначенных для “быстрого” тайпинга. К вашим услугам – Emmet (ex Zen Coding).
Данный плагин интересен, помимо всего прочего, тем, что написан на любимом всем фронтенд разработчикам языке javascript и потому хорошо переносим между различными платформами. Сейчас он представлен практически для всех известных IDE: Eclipse, Sublime Text 2, TextMate, Coda и пр.


Давайте просто напишем в редакторе div, нажмём tab (для Sublime Text 2, в вашем редакторе может быть и другая клавиша) и получим:

<div></div>

Или, допустим, мы хотим создать ненумерованный список из 5 элементов, для этого пишем:ul>li*5

Результат:
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Работа с классами, дивами (элемент по умолчанию) и структурой также довольно проста. Создадим небольшой лэйаут:.container>.header+.main+.footer

Результат:
<div class="container">
	<div class="header"></div>
	<div class="main"></div>
	<div class="footer"></div>
</div>

Или то же самое, но в стиле html5: .container>header+.main+footer:
<div class="container">
	<header></header>
	<div class="main"></div>
	<footer></footer>
</div>

Emmet прямо таки читает наши мысли! К примеру, если мы напишем просто a и нажмём tab, то результат будет такой:
<a href=""></a>

Т.е. атрибут href дописывать не придется – Emmet обо всё позаботился за нас.

А как насчёт счетчика нумерации? И можно ли помещать текст внутри тегов? Давайте рассмотрим пример сложнее:

ul#nav>li.item$*4>a{Item $}

Нажимает tab
<ul id="nav">
	<li class="item1"><a href="">Item 1</a></li>
	<li class="item2"><a href="">Item 2</a></li>
	<li class="item3"><a href="">Item 3</a></li>
	<li class="item4"><a href="">Item 4</a></li>
</ul>

Уделите время и поиграйтесь с этими параметрами: $, {text}, *. Это довольно забавно :)

Дополнительные атрибуты задаются очень просто:

input[name="client"]
<input type="" name="client">

Возьмите себе на вооружение!

Источник:
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.