- Устанавливаем Package Control — менеджер пакетов (плагинов). Теперь любой новый плагин можно будет установить за секунду
- Открываем командную панель нажатием Сtrl+Shift+P (или Command+Shift+P для OSX) и находим Package Control: Install Package. Тоже самое можно сделать выбрать из меню Preferences ->Package Control
- Теперь вы должны увидеть список пакетов доступных для установки. Нужный нам пакет называется Emmet. Находим пакет Emmet (просто начните вводить «emme…» в Sublime Text 2 предусмотрен умный поиск). И нажимаем Enter чтоб установить :-)
Приступим к Zen кодингу. Все его правила можно описать в нескольких пунктах:
- Атрибуты ID и CLASS: div#page.section.main.
- Другие атрибуты: div[title], a[title="Hello world" rel], td[colspan=2].
- Множество элементов: li*5 выведет тэг <li> пять раз.
- Нумерация элементов с помощью символа $: li.item$*3 выведет тэг <li> 3 раза, заменяя символ $ номером элемента.
- Несколько символов ‘$’ в строке заменяются нулями, то есть.: li.item$$$ → li.item001
- Группировка неограниченной вложенности: div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer. Фактически вы можете описать разметку всего документа всего одной строкой.
- Поддержка фильтров
- Тэг div может быть опущен если элемент начинается с ID или CLASS: #content>.sectionто же самое что и div#content>div.section.
Чтобы начать использовать ZenCoding создайте новый документ и сохраните его — это важно, тк в новых и не сохраненных файлах ZenCoding работать не будет.
Введите в документе что-то типа:
select>option#item-$*3
а затем нажмите Tab чтобы «раскрыть» аббревиатуру и вы сразу почувствуете магию ZenCoding ;-)
Русский