Если вы периодически сталкиваетесь с HTML и CSS в своей работе, то наверняка слышали об этом наборе скриптов для скоростной верстки. Если нет, рекомендую скорее восполнить этот пробел. Хоть в этом инструменте и скрыто много возможностей, начать работать с ним вы можете уже сейчас.
Установка
Вручную
Sublime Package Control
Синтаксис
ZenCoding работает как обычный автокомплит. Например, вы набираете table, нажимаете tab и получаете готовый тег:
Разница состоит в том, что вы можете указать нужное вам количество тегов с необходимой вложенностью и параметрами. Главное понять, по какому принципу строятся выражения. Синтаксис ZenCoding очень логичен, и если вы знакомы с HTML и CSS, то освоить его сможете довольно быстро.
| Оператор | Результат |
|---|---|
| . | class |
| # | id |
| > | вложенный тег |
| + | соседний тег |
| [name=value] | параметр |
| *X | множитель |
| $ | число |
Ниже я приведу несколько простых примеров использования. От простого к чуть более сложному.
table, tab
table.name
table#id.name
table#id.name>tr>td
<tr>
<td></td>
</tr>
</table>
table#id.name>tr>td+td или table#id.name>tr>td*2
<tr>
<td></td>
<td></td>
</tr>
</table>
table#id.name>(tr>td*2)*2
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
table#id.name>(tr>td*2)+tr>td[colspan=2]
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</table>
img[src="/images/image-$$.jpg"]*3
<img src="/images/image-02.jpg" alt="">
<img src="/images/image-03.jpg" alt="">
Хоткеи
В качестве обзорной экскурсии, хотелось бы привести список примечательных хоткеев, которые обязательно пригодятся в работе.
Основные
| tab | добавить HTML элемент. |
| ctrlaltenter | реалтайм отображение интерпритации вводимой Zen-строки. Работает с выделением. |
| ., tab | добавить div с атрибутом class. |
| #, tab | добавить div с атрибутом id. |
| altshiftw | обернуть элемент, находящийся под курсором. |
| ctrlshiftu | удалить тег, находящийся под курсором. |
| ctrlalt/ | закомментировать конструкцию тегов, находящуюся под курсором. |
Выделение
| ctrlshifta | выделить пару тегов, между которыми находится курсор. |
| ctrlshiftn | выделить парные теги и все, что находится между ними. |
| ctrlshiftt | отменить последние парное выделение. |
| ctrlshift. | выделить следующий элемент. |
| ctrlshift, | выделить предыдущий элемент. |
Курсор
| ctrlaltn | переместить курсор к парному тегу. |
| ctrl. | переместить курсор к следующему месту редактирования. |
| ctrl, | переместить курсор к предыдущему месту редактирования. |
Разное
| f1 | CSS подсказка. |
| ctrlaltshifth | вставить HTML-заготовку. |
| ctrlshiftalt6 | кодировать или декодировать изображение в base64. |
| ctrlaltshiftm | обновить или добавить размеры изображения тегу, находящемуся под курсором. |
| ctrlaltshift= | вычислить простое математические выражение под курсором. |
| ctrlj | объединить выделенные строки в одну. Если ничего не выделено, находит ближайший парный тег и объединяет все между ними. |
Фильтры
В ZenCoding есть возможность использования фильтров для изменения генерируемого кода. Для того, чтобы включить фильтр, его необходимо указать через вертикальную черту после выражения. Например: table>tr>td|haml.
| Фильтр | Действие |
|---|---|
| haml | Включает генерацию HAML кода. Используется по-умолчанию в HAML файлах. |
| html | Включает генерацию HTML кода. Используется по-умолчанию во всех файлах, кроме HAML. |
| e | Заменяет символы <, > и & безопасными HTML-кодами. |
| c | Добавляет комментарии в генерируемый код. |
| fc | CSS фильтр. Добавляет пробел после параметра. |
Ссылки
Загрузить https://github.com/sergeche/zen-coding/downloads
Синтаксис http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn
Демо http://zen-coding.ru/textarea/
..
а выходит..
>, кто с этим сталкивался? как решили проблему?заранее спасибо.