Zen Coding в Sublime Text 2

  1. Устанавливаем Package Control — менеджер пакетов (плагинов). Теперь любой новый плагин можно будет установить за секунду
  2. Открываем командную панель нажатием Сtrl+Shift+P (или Command+Shift+P для OSX) и находим Package Control: Install Package. Тоже самое можно сделать выбрать из меню Preferences ->Package Control
  3. Теперь вы должны увидеть список пакетов доступных для установки. Нужный нам пакет называется 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 ;-)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *