Наверное любой веб-разработчик сталкивается с необходимостью набирать HTML код. Пусть даже это временные заготовки, необходимые до момента готовности дизайна сайта. Это не самое увлекательное занятие – печатать подряд одни и те же элементы. Так может упростим и ускорим данный процесс?
Что нужно для работы?
Для достижения поставленной цели необходимо установить дополнение Web Essentials 2012 для Visual Studio 2012. Оно содержит много полезного для веб-разработчика функционала. Но сейчас остановимся только на одной его возможности: поддержке Zen-Coding.
Начнем с примера
Сама идея Zen-Coding проста: зачем набирать множество тегов, зачастую повторяющихся, если все это можно записать упрощенно в одной строке. Вот, например, набранная при редактировании HTML строка:
div#page>div.logo+ul#navigation>li*5>a
После нажатия кнопки Tab она развернется в следующую конструкцию:
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
Синтаксис Zen-Coding простой и интуитивный настолько, что уже из приведенного примера можно понять половину его правил. Тем не менее, рассмотрим все возможности, доступные c Web Essentnal 2012.
Синтаксис Zen-Coding
Ниже приведена таблица синтаксических элементов с примерами:
| Элемент |
Описание |
Пример |
Результат примера |
| E |
Элемент |
div |
<div>
</div>
|
| E[attr] или E[attr=value] |
Элемент с заданным атрибутом attr и его значением value |
td[colspan=2 data-myindex] |
<td colspan="2" data-myindex="">
</td>
|
| E#name |
Элемент с id=name |
div#header |
<div id="header">
</div>
|
| E.className |
Элемент с заданным классом className |
div.adverts |
<div class="adverts">
</div>
|
| E>E1 |
Элемент E1 вложен в E |
div>span |
<div>
<span></span>
</div>
|
| E+E1 |
Элемент E1 на одном уровне с E |
div+span |
<div></div>
<span></span>
|
| E^E1 |
Элемент E1 переходит на 1 уровень выше Е |
div>span^a |
<div>
<span></span>
</div>
<a href=""></a>
|
| E*N |
Повтор N раз элемента E |
a*3 |
<a href=""></a>
<a href=""></a>
<a href=""></a>
|
| E{text} |
Текст |
a{click here} |
<a href="">click here</a>
|
Специальные конструкции
Можно использовать символ $ в названиях классов. При генерации HTML он будет заменен на порядковый номер повторяющегося элемента. При этом, использование нескольких символов $ приведет к дополнению нулями слева до заданного числа символов:
li.item$*2
|
<li class="item1"></li>
<li class="item2"></li>
|
li.item$$$*2
|
<li class="item001"></li>
<li class="item002"></li>
|
Есть ряд сокращенных конструкций:
ul+
|
<ul>
<li></li>
</ul>
|
table+
|
<table>
<tr>
<td></td>
</tr>
</table>
|
dl+
|
<dl>
<dt></dt>
<dd></dd>
</dl>
|
Отдельно стоит отметить генератор текста "Lorem ipsum". Для этого используется объявление lorem, вместе с которым можно указать требуемое число слов. Например:
div>lorem
<div>Lorem ipsum dolor sit amet,
consectetur adipiscing elit fusce vel sapien
elit in malesuada semper mi, id sollicitudin
urna fermentum ut fusce varius nisl ac ipsum
gravida vel pretium tellus.</div>
ul>li*3>lorem5
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Consectetur adipiscing elit fusce vel.</li>
<li>Sapien elit in malesuada semper.</li>
</ul>
Разумеется, можно комбинировать объявления. Например:
span#one.s1.s2
<span id="one" class="s1 s2"></span>
div#myid>
span.first[data-bind="firstName"]+
span.last[data-bind="lastName"]+
span.rating
<div id="myid">
<span class="first" data-bind="firstName"></span>
<span class="last" data-bind="lastName"></span>
<span class="rating"></span>
</div>
К большому сожалению, поддержка групп вида (E1+E2) не работает в текущей версии Web Essentials 2012.
Остается только привести адрес сайта проекта Zen-Coding: http://code.google.com/p/zen-coding/
И не теряйте времени зря.