Zen coding

Emmet (предыдущее название — Zen Coding) — это набор плагинов для различных популярных текстовых редакторов, используемых для скоростного написания HTML и CSS кода. Синтаксис Emmet довольно прост и не требует больших усилий со стороны разработчика для его изучения, в то же время использование этого инструмента позволяет ускорить процесс написания верстки в несколько раз.

Основные операции в Emmet

Итак, для написания HTML в Emmet используются 12 типов селекторов:

  • #  — создает атрибут id
  • .  — создает атрибут class
  • []  — создает любые другие атрибуты, в том числе и пользовательские
  • >  — делает переход на один уровень ниже
  • +  — создает соседние элементы на том же уровне
  • ^  — делает переход на уровень вверх
  • *  — умножает элементы
  • $  — заменяется числом, каждый раз увеличивающимся на единицу
  • $$  — то же самое, только двухзначное
  • {}  — добавляет текстовое содержимое элементам
  • ()  — группирует элементы
  • :  — используется для некоторых элементов, таких как <input>, <a>, <link> и др., и задает для них атрибуты

Рассмотрим на примерах.

Для того, чтобы создать один элемент с атрибутами class и id, необходимо написать:

div#content.column

После набора этой строки нажимаем клавишу Tab (в Notepad++ клавиши Ctrl+Alt+Enter) и получаем результат:

<div id="content" class="column"></div>

В квадратных скобках можно задавать любые атрибуты тегам. Если необходимо задать их несколько, то они разделяются пробелом, например:

input[type="text" name="address" placeholder="some text" disabled]

Результат:

<input type="text" name="address" placeholder="some text" disabled="">

Для некоторых тегов есть еще более лаконичный способ задавать атрибуты, указывая их значения через двоеточие. Например, так можно задавать для элемента input его тип:

input:text

или еще короче:

input:t

Результат:

<input type="text" name="" id="">

Аналогично задаются типы: hidden (h), search, email, url, password (p), datetime, datetime-local, date, month, week, time, number, range, color, checkbox (c), radio (r), file (f), submit (s), image (i), reset, button (b).

Таким же образом можно задавать атрибуты тегов метаданных <link> и <meta>. Вот так можно подключить внешний css-файл:

link:css

Результат:

<link rel="stylesheet" type="text/css" href="style.css" media="all">

Остается только исправить значение href.

Файлы .js подключаются аналогично:

script:src

получаем:

<script type="text/javascript" src=""></script>

Селекторы > и + создают, соответственно, дочерние и соседние элементы, а селектор ^ позволяет подниматься в иерархии на один уровень. Также есть возможность умножать элементы с помощью знака *. Например, следующая строка создаст список с пятью пунктами:

ul>li*5

Если необходимо добавить тегам текстовое содержимое, нужно использовать фигурные скобки, например, так:

div#dialog>p>span{text}

Результат:

<div id="dialog">  	<p>  		<span> text </span>  	</p>  </div>

В Emmet есть еще одна интересная возможность: он позволяет добавлять нумерацию, например, атрибутов множественных элементов с помощью знака $. Нумерация начинается с единицы. Это может оказаться полезным, если, например, необходимо создать  большое число элементов с названиями классов, различающимися только цифрой на конце, или выпадающий список, у пунктов которого атрибут value должен нумероваться с единицы:

select>option[value="$"]*10

Результатом выполнения в данном случае будет <select>, содержащий 10 тегов <option> со значениями атрибута value от 1 до 10.

Для сложных конструкций можно применять группировку элементов, используя круглые скобки. Однако эта возможность существует не во всех редакторах, например, она не поддерживается расширением Web Essentials 2012 для Visual Studio.

Шаблоны HTML

Emmet также предоставляет возможность создавать разметку с использованием различных шаблонов HTML, наиболее интересный из них — html:5. Такая команда даст следующий результат:

<!doctype html>  <html lang="en">  <head>  	<meta charset="UTF-8">  	<title>Document</title>  </head>  <body>    </body>  </html>

Условные комментарии

С помощью команд cc:ie и cc:noie можно добавить условные комментарии. Команда cc:ie выдает разметку, код внутри которой будет распознаваться только Internet Explorer, cc:noie, наборот, генерирует комментарии, содержимое которых будет доступно только всем остальным браузерам. Результат выполнения первой:

<!--[if IE]>  <![endif]-->

и второй:

<!--[if !IE]><!-->  <!--<![endif]-->

Сокращенные конструкции

Существует также несколько сокращенных конструкций для создания таблиц и списков: table+, ul+, ol+, dl+, select+. Результаты их выполнения будут такими:

<table>  	<tr>  		<td></td>  	</tr>  </table>    <ul>  	<li></li>  </ul>    <ol>  	<li></li>  </ol>    <dl>  	<dt></dt>  	<dd></dd>  </dl>    <select name="" id="">  	<option value=""></option>  </select>

Оборачивание в аббревиатуру

В случае, если часть разметки уже существует, и необходимо дополнить её, не переписывая заново, можно воспользоваться функцией оборачивания. Для этого нужно:

  • установить курсор на тот тег, который должен быть обернут, либо на текст, который должен быть помещен в новый тег,
  • затем открыть диалоговое окно этой команды нажатием клавиш Ctrl+Shift+G в Sublime Text 2 (здесь это будет командная строка внизу экрана) или Ctrl+Shift+Alt+Enter в Notepad++
  • и написать там соответствующую аббревиатуру Emmet.

Например, у нас существует следующая разметка:

<div>  	<p>Hello</p>  </div>

Необходимо создать внутри div новый элемент div с классом wrap и поместить в него существующий параграф с текстом. Устанавливаем курсор внутри тега <p> или даже закрывающего тега </p>, открываем диалог и пишем там:

div.wrap

Результат будет таким:

<div>  	<div class="wrap">  		<p>Hello</p>  	</div>  </div>

Подобным образом можно оборачивать не только отдельные элементы, но и множественные, при этом даже необязательно, чтобы они были одинаковыми. Для этого нужно выделить тот набор элементов, в котором каждый элемент должен быть обернут, и в окне команды с помощью селектора * указать, какой элемент обертки нужно размножить. Например, есть div, в котором находится несколько параграфов:

<div>  	<p>About us</p>  	<p>Catalog</p>  	<p>Contacts</p>  </div>

Допустим: через некоторое время разработчику понадобилось, чтобы каждый из этих параграфов находился внутри ссылки, которая, в свою очередь, находится внутри пункта <li> списка <ul>. Выделяем все параграфы, нажимаем соответствующие клавиши и в открывшемся окне пишем:

ul>li*>a

В результате получим следующий код:

<div>  	<ul>  		<li><a href=""><p>About us</p></a></li>  		<li><a href=""><p>Catalog</p></a></li>  		<li><a href=""><p>Contacts</p></a></li>  	</ul>  </div>

Удаление тегов

С помощью Emmet можно упростить процесс удаления ненужных тегов. Достаточно установить курсор на тот тег, который необходимо удалить, и вызвать команду нажатием клавиш Ctrl+Shift+; (Sublime Text 2) — удалится не только открывающий тег, но и закрывающий, а также строки, на которых они находились. В Notepad++ нет горячих клавиш по умолчанию для этой команды, но их можно настроить в меню «Опции» > «Горячие клавиши». В открывшемся окне выбрать вкладку «Plugin commans» и назначить там комбинацию клавиш для команды «Remove tag».

Работа с CSS

Для быстрого написания  CSS кода в Emmet существует большой набор специальных сокращений свойств и их значений. Самый простой и эффективный способ использования этих сокращений — писать аббревиатуры, состоящие из первых букв свойств и их значений, например, сокращение tdn развернется как:

text-decoration: none;

Точно такой же результат дадут записи td-n и td:n.

Если нужно указать несколько значений для свойства, это можно сделать через знак дефиса:

m10-20

Результат:

margin: 10px 20px;

Подобным образом задаются и отрицательные значения:

m-10--20

Результат:

margin: -10px -20px;

Если после числовых значений свойств не указывать единицы измерения, то по умолчанию автоматически выставляются пиксели, за исключением случая, когда значения нецелые — тогда выставляются em. Также существует несколько сокращений для единиц измерения: вместо % можно писать p, вместо em — e, а вместо ex — x.
Например:

w100p

Результат:

width: 100%;

Если добавить в конец аббревиатуры восклицательный знак, то к свойству будет добавлено значение !important, например:

p20!

даст результат:

padding: 20px !important;

Однако наиболее интересная возможность для работы с CSS, которую предоставляет Emmet — это создание свойств с вендорными префиксами. Для ряда таких свойств (border-radius, transform и т. д.) автоматически создаются копии со всеми необходимыми вендорными префиксами. Так, например, аббревиатура brs5 будет расширена следующим образом:

-webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;

Также Emmet значительно облегчает процесс написания стилей для элементов с градиентом. Для этого используется специальная аббревиатура lg (или linear-gradient), после которой в круглых скобках указываются параметры градиента:

lg(left, #ddd, #ccc)

Результат:

background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#ddd), to(#ccc));  background-image: -webkit-linear-gradient(left, #ddd, #ccc);  background-image: -moz-linear-gradient(left, #ddd, #ccc);  background-image: -o-linear-gradient(left, #ddd, #ccc);  background-image: linear-gradient(left, #ddd, #ccc);

Для редактирования значений в уже написанных свойствах с вендорными префиксами можно воспользоваться командой обновления значения (горячие клавиши в Sublime Text 2 — Ctrl+Shift+R). Сначала нужно исправить значение в одной из строк, затем вызвать команду, и данное значение обновится во всех копиях этой строки.

Математические вычисления

Emmet позволяет выполнять несложные арифметические вычисления прямо во время написания HTML или CSS кода, не используя какие-либо сторонние калькуляторы. Нередко возникают ситуации, когда необходимо вычислить значения отступов, ширины элементов и других значений; данная особенность освобождает разработчика от необходимости переключаться между окнами редактора и калькулятора. Поддерживаются операции сложения, вычитания, умножения и деления. В Sublime Text 2 горячие клавиши для этой операции — Ctrl+Shift+Y, в Notepad++ по умолчанию горячих клавиш для этой команды нет, необходимо задать их самому (меню «Опции» > «Горячие клавиши»).

В каких случаях стоит использовать Emmet

В перечисленных выше примерах может быть не вполне очевидна разница между написанием кода с использованием Emmet и без него. Однако его преимущества становятся очевидны, когда возникает необходимость написания большого количества однотипного кода с многократным повторением одних и тех же элементов. Как правило, даже если прибегать к методу копирования и вставки повторяющихся участков, процесс занимает довольно длительное время, вдобавок есть возможность запутаться.

Например, необходимо сделать таблицу из пяти строк и пяти столбцов, в первой колонке должна быть нумерация строк (от 1 до 5). Такая разметка создается при помощи одной небольшой строки:

table>tr*5>td{$}+td*4

Результат (37 строк кода):

<table>  	<tr>  		<td>1</td>  		<td></td>  		<td></td>  		<td></td>  		<td></td>  	</tr>  	<tr>  		<td>2</td>  		<td></td>  		<td></td>  		<td></td>  		<td></td>  	</tr>  	<tr>  		<td>3</td>  		<td></td>  		<td></td>  		<td></td>  		<td></td>  	</tr>  	<tr>  		<td>4</td>  		<td></td>  		<td></td>  		<td></td>  		<td></td>  	</tr>  	<tr>  		<td>5</td>  		<td></td>  		<td></td>  		<td></td>  		<td></td>  	</tr>  </table>

Многие плагины, используемые разработчиками, требуют определенной разметки тех элементов, к которым они подключаются. Зная заранее о том, какую структуру необходимо создать, гораздо удобнее сделать это сразу, одной командой. Так будет выглядеть создание разметки виджета «Accordion» популярной библиотеки jQuery UI:

div#accordion>(h3+div>p)*5

Результат:

<div id="accordion">  	<h3></h3>  	<div>  		<p></p>  	</div>  	<h3></h3>  	<div>  		<p></p>  	</div>  	<h3></h3>  	<div>  		<p></p>  	</div>  	<h3></h3>  	<div>  		<p></p>  	</div>  	<h3></h3>  	<div>  		<p></p>  	</div>  </div>

Или виджета «Tabs»:

div#tabs>(ul>li*5>a[href="#tabs-$"])+div#tabs-$*5>p

Результат:

<div id="tabs">  	<ul>  		<li><a href="#tabs-1"></a></li>  		<li><a href="#tabs-2"></a></li>  		<li><a href="#tabs-3"></a></li>  		<li><a href="#tabs-4"></a></li>  		<li><a href="#tabs-5"></a></li>  	</ul>  	<div id="tabs-1">  		<p></p>  	</div>  	<div id="tabs-2">  		<p></p>  	</div>  	<div id="tabs-3">  		<p></p>  	</div>  	<div id="tabs-4">  		<p></p>  	</div>  	<div id="tabs-5">  		<p></p>  	</div>  </div>

Фильтрация

В Emmet есть возможность изменять генерируемый код при помощи различных фильтров. Фильтр включается в конце аббревиатуры, после вертикальной черты. Существуют следующие фильтры:

  • haml — генерирует результат как HAML-код, включен по умолчанию, если выбран синтаксис HAML.

Без фильтра аббревиатура

#content>ul.nav>li*2

развернется следующим образом:

<div id="content">  	<ul class="nav">  		<li></li>  		<li></li>  	</ul>  </div>

Если добавить фильтр |haml, получим разметку в виде HAML-кода:

#content   %ul.nav   		%li   		%li
  • html — генерирует HTML-код, включен по умолчанию везде, кроме HAML-файлов
  • e — заменяет символы <, > и & соответственно на последовательности &lt;, &gt; и &amp

Добавим в предыдущий пример фильтр |e:

#content>ul.nav>li*2|e

Результат:

&lt;div id="content"&gt;  	&lt;ul class="nav"&gt;  		&lt;li&gt;&lt;/li&gt;  		&lt;li&gt;&lt;/li&gt;  	&lt;/ul&gt;  &lt;/div&gt;
  • c — добавляет комментарии в код
  • s — выводит всю разметку в одну строку
  • t — работает только при оборачивании тегов; обрезает маркеры оборачиваемых пунктов списка.

Пусть нужно каждый из пунктов следующего списка обернуть в ссылку:

<div>  	1. About us  	2. Catalog  	3. Contacts	  </div>

Список нумерованный, и, если бы количество пунктов было в нем гораздо большим, то процесс удаления номеров занял бы значительное время. Вместо этого можно применить команду оборачивания тегов, описанную выше, добавив в конце фильтр |t:

a*|t

Результат:

<div>  	<a href="">About us</a>  	<a href="">Catalog</a>  	<a href="">Contacts</a>  </div>

Настройка

Поскольку в плагинах Emmet предусмотрена поддержка расширений с помощью json- и js-файлов, существует несколько возможностей пользовательской настройки, которые позволяют разработчикам полностью адаптировать этот инструмент под свои нужды:

1. Настройка горячих клавиш команд

Каждой команде Emmet можно назначить любое удобное сочетание горячих клавиш. В Sublime Text 2 для этого нужно открыть в папке плагина файл Default(Windows).sublime-keymap (для Windows), найти нужную команду и назначить для нее другое сочетание клавиш. Для Notepad++, как было сказано ранее, настройка горячих клавиш осуществляется в меню «Опции» > «Горячие клавиши» на вкладке «Plugin commands».

2. Возможность расширения позволяет добавлять свои команды и фильтры

Можно в файле Emmet.sublime-settings определить параметр extensions_path, и Emmet будет подгружать все .js-файлы автоматически при запуске Sublime Text 2.

3. Добавление и редактирование сниппетов

Все расширения аббревиатур и сниппеты Emmet можно редактировать в файле snippets.json, там же можно добавлять новые. Это может быть полезным, если разработчику не нужны некоторые атрибуты тегов, которые создаются по умолчанию, или, наоборот, всегда нужны те, которые не создаются.

4. Настройка команд

Чтобы скорректировать результаты выполнения некоторых команд, нужно создать в папке расширений файл preferences.json, в котором указать значения опций, полный список и описание которых перечислено в документации: http://docs.emmet.io/customization/preferences/.

Например, встроенный генератор градиента, о котором шла речь в разделе «Работа с CSS», не поддерживает градиенты для Internet Explorer. Это можно исправить, сделав небольшую настройку в preferences.json:

{   "css.gradient.prefixes": "webkit, moz, o, ms"  }

К трём префиксам для градиента, которые были установлены по умолчанию, мы добавили еще один — «ms». Результат работы генератора будет выглядеть таким образом:

background-image: -webkit-gradient(linear, 0 0, 0 100%, from("555"), to("666"));  background-image: -webkit-linear-gradient("555", "666");  background-image: -moz-linear-gradient("555", "666");  background-image: -o-linear-gradient("555", "666");  background-image: -ms-linear-gradient("555", "666");  background-image: linear-gradient("555", "666")

Теперь код сгенерирует градиент в IE 10, но в браузерах ниже IE 9 он работать не будет. Для того, чтобы задать градиент для старых версий IE, нужно задать такое свойство:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#555555', endColorstr='#666666');

Эту проблему в последней версии Emmet можно решить только написанием сниппета для CSS:

"lg:ie": "filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='', endColorstr='');"

5. Настройка синтаксиса

Каким образом будет выглядеть разметка, сгенерированная Emmet, зависит от того, какой doctype был указан на странице. Всего у Emmet существует несколько профайлов для форматирования синтаксиса:

  • html — профайл по умолчанию, внутри одиночных тегов не ставится слеш, например: <br>;
  • xhtml — такой же, но одиночные теги закрываются слешем: <br />;
  • xml — профайл по умолчанию, если в редакторе определен синтаксис XML или XSL; каждый тег находится на новой строке с соответствующим отступом, все пустые теги закрываются слешем: <br/>.
  • line — выводит результат без отступов и в одну строку.

Если данный профайл необходимо каким-либо образом изменить, или применить к одному синтаксису профайл для другого, то для этого нужно в папке расширений создать файл syntaxProfiles.json и произвести там соответствующую настройку.

Например, если нужно, чтобы в html-разметке все одиночные теги были закрыты слешем, можно назначить для html профайл для форматирования xhtml следующим образом:

{   "html": "xhtml"  }

Или создать собственный профайл (список доступных свойств в документации: http://docs.emmet.io/customization/syntax-profiles/):

{   "html": {   "self_closing_tag": true   }  }

Установка Emmet в Notepad++ на Windows

Пока Emmet недоступен для установки через менеджер плагинов, поэтому необходимо установить его вручную, выполнив следующие шаги:

  1. Установить через менеджер плагинов (Плагины > Plugin Manager > Show Plugin Manager) Python Script
  2. Скачать архив https://github.com/emmetio/npp/raw/master/emmet-npp.zip и распаковать его
  3. Скопировать файл EmmetNPP.dll в C:Program FilesNotepad++plugins
  4. Скопировать папку EmmetNPP в %USERPROFILE%AppDataRoamingNotepad++pluginsconfig
  5. Запустить Notepad++

Установка Emmet в Sublime Text 2

Устанавливаем Package Control — менеджер пакетов (плагинов): http://wbond.net/sublime_packages/package_control
Открываем командную панель нажатием Сtrl+Shift+P и находим Package Control: Install Package.
Zen coding

Нажимаем Enter, и теперь мы должны увидеть список пакетов, доступных для установки. Находим пакет Emmet, нажимаем Enter, чтобы установить, и перезапускаем редактор.

ts-soft.ru

Как работает Emmet?

Давайте по-чесноку: написание HTML кода занимает много времени за счёт ввода тегов, атрибутов, кавычек, скобок и так далее. Конечно же большинство текстовых редакторов помогают в этом, но всё же гораздо меньше печатать нам от этого не приходится. Emmet может значительно упростить написание кода за счёт преобразования простых аббревиатур в полноценные блоки кода.

HTML аббревиатуры

Инициализаторы

Получить базовую структуру HTML документа теперь можно меньше чем за одну секунду. Напишите аббревиатуру html:5 или просто !, нажмите клавишу Tab и через миг вы увидите полноценный базовый код с доктайпом HTML5.

Zen coding

  • html:5 или ! — HTML5
  • html:xt — XHTML transitional
  • html:4s — HTML4 strict

Добавление классов, id-шек, текста и атрибутов

Поскольку синтаксис Emmet очень похож на CSS селекторы, то понять, как им пользоваться, очень просто. Попробуйте поэкспериментировать с каким-то элементом (к примеру, p) и идентификатором (к примеру, p#description)

Zen coding

Также вы можете комбинировать классы и идентификаторы. К примеру, выражение p.bar#foo преобразится в:

Теперь давайте посмотрим, как добавить текст и атрибут. Для того чтобы задать элементу какой-то текст, его значение пишем в фигурных скобках. К примеру h1{foo} преобразится в:

Квадратные скобки используются для добавления атрибутов и их значений. К примеру, a[href=#] преобразится в:

Zen coding

Вложенность элементов

Благодаря Emmet и синтаксису написания вложенных выражений, вы можете полностью создать полноценный html документ, воспользовавшись одной аббревиатурой. Родительский элемент ставится перед знаком >, а все внутренние элементы должны идти за ним. Знак + позволяет соединить несколько аббревиатур, так что сгенерированный код будет идти друг за другом. Новый оператор под знаком ^ позволяет подняться на один уровень выше.

Zen coding

Группировка

Часто можно немного запутаться, когда вы пишите большие аббревиатуры. Для того чтобы этого избежать, можно воспользоваться группировкой. К примеру, (.foo>h1)+(.bar>h2) преобразится в:

Zen coding

Подстановка названий тегов

Для того чтобы создать div блок с класом item, достаточно преобразовать аббревиатуру div.item.

В прошлом написание подобных выражений было упрощено. К примеру, чтобы получить тот же <div class="item"></div>, можно было написать аббревиатуру .item. Emmet в этом плане стал ещё более продвинутым. Теперь плагин может автоматически определять, какой тег нужно подставить в зависимости от родителя. Т.е. если мы преобразуем аббревиатуру .item внутри списка <ul>, то аббревиатура превратится в <li class="item"></li>, вместо <div class="item"></div>, как это было раньше.

Zen coding

Вот небольшая шпаргалка:

  • li для ul и ol
  • tr для table, tbody, thead и tfoot
  • td для tr
  • option для select и optgroup

Умножение

Также, с помощью знака *, вы можете определить, сколько раз должен напечататься нужный вам элемент. Таким образом, аббревиатура ul>li*3 преобразуется в:

Zen coding

Нумерация

Как на счёт комбинации оператора умножения и нумерации? Да нет проблем! Просто поставьте знак $ в конце названия атрибута или элемента и будет вам счастье! К примеру, ul>li.item$*3 превратится в:

Zen coding

Попробуйте сами!

Не терпится попробовать?! Следующее текстовое поле как раз для вас. Пишите аббревиатуру, затем нажимайте tab и вуаля!

CSS аббревиатуры

Значения

Emmet предназначен для упрощения написания не только HTML, но и CSS кода. К примеру, вы хотите задать элементу ширину. Для этого просто напишите w100:

Zen coding

Значение px ставится по умолчанию. Для другой единицы измерения используйте специальные символы. К примеру h10p+m5e:

Список возможных значений:

  • p%
  • eem
  • xex

Дополнительные опции

К примеру, с помощью выражения @f, вы можете получить код:

В данном случае, такие опции как background-image, border-radius, font, @font-face, text-outline, text-shadow могут быть добавлены, если к выражению приписать знак +. К примеру, @f+ преобразуется в:

Zen coding

Автоматический поиск

Emmet также может осуществить поиск нужного значения, если вы не совсем верно написали выражение. Плагин будет искать самое схожее выражение: к примеру, аббревиатуры ov:h, ov-h, ovh и oh преобразуются в один и тот же код:

Zen coding

CSS3 префиксы

CSS3 конечно очень крут, но запомнить все существующие префиксы просто невозможно! Ну и не надо! Emmet и тут окажет нам помощь. К примеру, слово trs будет преобразовано в:

Zen coding

Также вы можете приписать свои префиксы. К примеру, -super-foo преобразится в:

Что если вам нужны только несколько из существующих префиксов? Нет проблем, просто укажите первые буквы их названий: -wm-trf преобразуется в:

  • w-webkit-
  • m-moz-
  • s-ms-
  • o-o-

Градиенты

Если говорить о CSS3, то нельзя обойти стороной градиенты. Все те сложные выражения, что вы писали вручную, можно заменить на одну аббревиатуру. К примеру, lg(left, #fff 50%, #000) преобразуется в:

Zen coding

Дополнительные возможности

Lorem Ipsum

С Emmet вы можете забыть об онлайн сервисе Lorem Ipsum. Теперь для этого есть специальная аббревиатура: lorem или ipsum. Также вы можете указать, сколько слов нужно сгенерировать. К примеру, lorem10 преобразуется в:

Zen coding

Также lorem ipsum можно смешать с другими элементами. К примеру, p*3>lorem5:

Настройка под себя

Emmet даёт нам возможность изменить большой спектр настроек плагина. Для этого нужно будет отредактировать три файла:

Для добавления нового выражения или изменения уже существующего отредактируйте файл snippets.json

Для преобразования работы фильтров и действий попробуйте изменить файл preferences.json

Для контроля отображения HTML и XML кода, редактируйте файл syntaxProfiles.json

И ещё!

Это только вершина айсберга. Emmet содержит в себе ещё огромное количество возможностей, таких как кодирование/декодирование изображений data:URL, обновление размеров изображения, увеличение/уменьшение цифровых значений и т.д.

Официальную страничку плагина можно найти тут. Также в вашем распоряжении документация и шпаргалка

ruseller.com

<body>  	<section class="super-heroes">  		<header class="super-hero-header">  			<h1>Who is the ultimate super hero?</h1>  		</header>  		<table class="table super-hero-table" width="500">  			<thead>  				<tr>  					<td class="hero-number-1">Hero 01</td>  				</tr>  				<tr>  					<td class="hero-number-2">Hero 02</td>  				</tr>  				<tr>  					<td class="hero-number-3">Hero 03</td>  				</tr>  				<tr>  					<td class="hero-number-4">Hero 04</td>  				</tr>  				<tr>  					<td class="hero-number-5">Hero 05</td>  				</tr>  			</thead>  			<tbody>  				<tr>  					<td class="hero-number-1">  						<ul>  							<li>Strength <!-- value --></li>  							<li>Speed <!-- value --></li>  							<li>Money <!-- value --></li>  							<li>Ability to fly <!-- value --></li>  							<li>Fashion point <!-- value --></li>  						</ul>  					</td>  				</tr>  				<tr>  					<td class="hero-number-2">  						<ul>  							<li>Strength <!-- value --></li>  							<li>Speed <!-- value --></li>  							<li>Money <!-- value --></li>  							<li>Ability to fly <!-- value --></li>  							<li>Fashion point <!-- value --></li>  						</ul>  					</td>  				</tr>  				<tr>  					<td class="hero-number-3">  						<ul>  							<li>Strength <!-- value --></li>  							<li>Speed <!-- value --></li>  							<li>Money <!-- value --></li>  							<li>Ability to fly <!-- value --></li>  							<li>Fashion point <!-- value --></li>  						</ul>  					</td>  				</tr>  				<tr>  					<td class="hero-number-4">  						<ul>  							<li>Strength <!-- value --></li>  							<li>Speed <!-- value --></li>  							<li>Money <!-- value --></li>  							<li>Ability to fly <!-- value --></li>  							<li>Fashion point <!-- value --></li>  						</ul>  					</td>  				</tr>  				<tr>  					<td class="hero-number-5">  						<ul>  							<li>Strength <!-- value --></li>  							<li>Speed <!-- value --></li>  							<li>Money <!-- value --></li>  							<li>Ability to fly <!-- value --></li>  							<li>Fashion point <!-- value --></li>  						</ul>  					</td>  				</tr>  			</tbody>  		</table>  		<p class="hero-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, sed ea blanditiis deserunt saepe praesentium repellat voluptatem obcaecati ipsa cupiditate totam nesciunt facilis pariatur eligendi fugiat expedita laboriosam nemo voluptatibus.  			<dl>  				<dt>hero 01</dt>  				<dd>Spiderman</dd>  				<dt>Hero 02</dt>  				<dd>The Hulk</dd>  				<dt>Hero 03</dt>  				<dd>Ironman</dd>  				<dt>hero 04</dt>  				<dd>Catwoman</dd>  				<dt>hero 05</dt>  				<dd>Batman</dd>  			</dl>  		</p>  	</section>  </body>

raygun.com

About The Author

Sergey Chikuyonok is a Russian front-end web-developer and writer with a big passion on optimization: from images and JavaScript effects to working process and … More about Sergey…

  • Leave a comment
  • 10 min read
  • Coding, Tools, CSS, HTML
  • Share on Twitter or LinkedIn

In this post we present a new speedy way of writing HTML code using CSS-like selector syntax — a handy set of tools for high-speed HTML and CSS coding. It was developed by our author Sergey Chikuyonok and released for Smashing Magazine and its readers.

In this post we present a new speedy way of writing HTML code using CSS-like selector syntax — a handy set of tools for high-speed HTML and CSS coding. It was developed by our author Sergey Chikuyonok and released for Smashing Magazine and its readers.

How much time do you spend writing HTML code: all of those tags, attributes, quotes, braces, etc. You have it easier if your editor of choice has code-completion capabilities, but you still do a lot of typing.

You may want to take a look at the following related posts:

  • Goodbye, Zen Coding. Hello, Emmet!
  • Challenging CSS Best Practices
  • Responsive Design Frameworks: Just Because You Can, Should You?

We had the same problem in JavaScript world when we wanted to access a specific element on a Web page. We had to write a lot of code, which became really hard to support and reuse. And then JavaScript frameworks came along, which introduced CSS selector engines. Now, you can use simple CSS expressions to access DOM elements, which is pretty cool.

But what if you could use CSS selectors not just to style and access elements, but to generate code? For example, what if you could write this…

div#content>h1+p

…and see this as the output?

<div id="content"> <h1></h1> <p></p> </div>

Today, we’ll introduce you to Zen Coding, a set of tools for high-speed HTML and CSS coding. Originally proposed by Vadim Makeev (article in Russian) back in April 2009, it has been developed by yours truly (i.e. me) for the last few months and has finally reached a mature state. Zen Coding consists of two core components: an abbreviation expander (abbreviations are CSS-like selectors) and context-independent HTML-pair tag matcher. Watch this demo video to see what they can do for you.

If you’d like to skip the detailed instructions and usage guide, please take a look at the demo and download your plugin right away:

Demo

  • Demo (use Ctrl + , to expand an abbreviation, requires JavaScript)

Downloads (Full Support)

  • Aptana (cross-platform);
  • Coda, via TEA for Coda (Mac);
  • Espresso, via TEA for Espresso (Mac);

Downloads (Partial Support, “Expand Abbreviation” Only)

  • TextMate (Mac, and can be used with E-text editor for Windows);
  • TopStyle;
  • Sublime Text;
  • GEdit;
  • editArea online editor;

Now, let’s see how these tools work.

Expand Abbreviation

The Expand Abbreviation function transforms CSS-like selectors into XHTML code. The term “abbreviation” might be a little confusing. Why not just call it a “CSS selector”? Well, the first reason is semantic: “selector” means to select something, but here we’re actually generating something, writing a shorter representation of longer code. Secondly, it supports only a small subset of real CSS selector syntax, in addition to introducing some new operators.

Here is a list of supported properties and operators:

  • E Element name (div, p);
  • E#id Element with identifier (div#content, p#intro, span#error);
  • E.class Element with classes (div.header, p.error.critial). You can combine classes and IDs, too: div#content.column.width;
  • E>N Child element (div>p, div#footer>p>span);
  • E+N Sibling element (h1+p, div#header+div#content+div#footer);
  • E*N Element multiplication (ul#nav>li*5>a);
  • E$*N Item numbering (ul#nav>li.item-$*5);

As you can see, you already know how to use Zen Coding: just write a simple CSS-like selector (oh, “abbreviation”—sorry), like so…

div#header>img.logo+ul#nav>li*4>a

…and then call the Expand Abbreviation action.

There are two custom operators: element multiplication and item numbering. If you want to generate, for example, five <li> elements, you would simply write li*5. It would repeat all descendant elements as well. If you wanted four <li> elements, with an <a> in each, you would simply write li*4>a, which would generate the following output:

<li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li>

The last one–item numbering is used when you want to mark a repeated element with its index. Suppose you want to generate three <div> elements with item1, item2 and item3 classes. You would write this abbreviation, div.item$*3:

<div class="item1"></div> <div class="item2"></div> <div class="item3"></div>

Just add a dollar sign wherever in the class or ID property that you want the index to appear, and as many an you want. So, this…

div#i$-test.class$$$*5

would be transformed into:

<div id="i1-test" class="class111"></div> <div id="i2-test" class="class222"></div> <div id="i3-test" class="class333"></div> <div id="i4-test" class="class444"></div> <div id="i5-test" class="class555"></div>

You’ll see that when you write the a abbreviation, the output is <a href=“”></a>. Or, if you write img, the output is <img src=“” alt=“” />.

How does Zen Coding know when it should add default attributes to the generated tag or skip the closing tag? A special file, called zen_settings.js describes the outputted elements. It’s a simple JSON file that describes the abbreviations for each language (yes, you can define abbreviations for different syntaxes, such as HTML, XSL, CSS, etc.). The common language abbreviations definition looks like this:

'html': { 'snippets': { 'cc:ie6': '<!--[if lte IE 6]>nt${child}|n<![endif]-->', ... },   'abbreviations': { 'a': '<a href=""></a>', 'img': '<img src="" alt="" />', ... } }

Element Types

Zen Coding has two major element types: “snippets” and “abbreviations.” Snippets are arbitrary code fragments, while abbreviations are tag definitions. With snippets, you can write anything you want, and it will be outputted as is; but you have to manually format it (using n and t for new lines and indentation) and put the ${child} variable where you want to output the child elements, like so: cc:ie6>style. If you don’t include the ${child} variable, the child elements are outputted after the snippet.

With abbreviations, you have to write tag definitions, and the syntax is very important. Normally, you have to write a simple tag with all default attributes in it, like so: <a href=“”></a>. When Zen Coding is loaded, it parses a tag definition into a special object that describes the tag’s name, attributes (including their order) and whether the tag is empty. So, if you wrote <img src=“” alt=“” />, you would be telling Zen Coding that this tag must be empty, and the “Expand Abbreviation” action would apply special rules to it before outputting.

For both snippets and abbreviations, you can ad a pipe character (|), which tells Zen Coding where it should place the cursor when the abbreviation is expanded. By default, Zen Coding puts the cursor between quotes in empty attributes and between the opening and closing tag.

Example

So, here’s what happens when you write an abbreviation and call the “Expand Abbreviation” action. First, it splits a whole abbreviation into separate elements: so, div>a would be split into div and a elements, with their relationship preserved. Then, for each element, the parser looks for a definition inside the snippets and then inside the abbreviations. If it doesn’t find one, it uses the element’s name as the name for the new tag, applying ID and class attributes to it. For example, if you write mytag#example, and the parser cannot find the mytag definition among the snippets or abbreviation, it will output <mytag id=“example”><mytag>.

We have made a lot of default CSS and HTML abbreviations and snippets. You may find that learning them increases your productivity with Zen Coding.

HTML Pair Matcher

Another very common task for the HTML coder is to find the tag pair of an element (also known as “balancing”). Let’s say you want to select the entire <div id=“content”> tag and move it elsewhere or just delete it. Or perhaps you’re looking at a closing tag and want to known which opening tag it belongs to.

Unfortunately, many modern development tools lack support for this feature. So, I decided to write my own tag matcher as part of Zen Coding. It is still in beta and has some issues, but it works quite well and is fast. Instead of scanning the full document (as regular HTML pair matchers do), it finds the relevant tag from the cursor’s current position. This makes it very fast and context-independent: it works even with this JavaScript code snippet:

var table = '<table>'; for (var i = 0; i < 3; i++) { table += '<tr>'; for (var j = 0; j < 5; j++) { table += '<td>' + j + '</td>'; } table += '</tr>'; } table += '</table>';

Wrapping With Abbreviation

This is a really cool feature that combines the power of the abbreviation expander with the pair tag matcher. How many times have you found that you have to add a wrapping element to fix a browser bug? Or perhaps you have had to add decoration, such as a background image or border, to a block’s content? You have to write the opening tag, temporarily break your code, find the appropriate spot and then close the tag. Here’s where “Wrap with Abbreviation” helps.

This function is pretty simple: it asks you to enter the abbreviation, then it performs the regular “Expand Abbreviation” action and puts your desired text inside the last element of your abbreviation. If you haven’t selected any text, it fires up the pair matcher and use the result. It also makes sense of where your cursor is: inside the tag’s content or within the opening and closing tag. Depending on where it is, it wraps the tag’s content or the tag itself.

Abbreviation wrapping introduces a special abbreviation syntax for wrapping individual lines. Simply skip the number after the multiplication operator, like so: ul#nav>li*>a. When Zen Coding finds an element with an undefined multiplication number, it uses it as a repeating element: it is outputted as many times as there are lines in your selection, putting the content of each line inside the deepest child of the repeating element.

If you’ll wrap this abbreviation div#header>ul#navigation>li.item$*>a>span around this text…

About Us Products News Blog Contact Up

You’ll get the following result:

<div id="header"> <ul id="navigation"> <li class="item1"><a href=""><span>About Us</span></a></li> <li class="item2"><a href=""><span>Products</span></a></li> <li class="item3"><a href=""><span>News</span></a></li> <li class="item4"><a href=""><span>Blog</span></a></li> <li class="item5"><a href=""><span>Contact Up</span></a></li> </ul> </div>

You can see that Zen Coding is quite a powerful text-processing tool.

Online Demo

You’ve learned a lot about how Zen Coding works and how it can make your coding easier. Why not try it yourself now, right here? Because Zen Coding is written in pure JavaScript and ported to Python, it can even work inside the browser, which makes it a prime candidate for including in a CMS.

  • Demo (use Ctrl + , to expand an abbreviation, requires JavaScript)

Supported Editors

Zen Coding doesn’t depend on any particular editor. It’s a stand-alone component that works with text only: it takes text, does something to it and then returns new text (or indexes, for tag matching). Zen Coding is written in JavaScript and Python, so it can run on virtually any platform out of the box. On Windows, you can run the JavaScript version of Windows Scripting Host. And modern Macs and Linux distributions are bundled with Python.

To make your editor support Zen Coding, you need to write a special plug-in that can transfer data between your editor and Zen Coding. The problem is that an editor may not have full Zen Coding support because of its plug-in system. For example, TextMate easily supports the “Expand Abbreviation” action by replacing the current line with the script output, but it can’t handle pair-tag matching because there’s no standard way to ask TextMate to select something.

Full Support

  • Aptana (cross-platform);
  • Coda, via TEA for Coda (Mac);
  • Espresso, via TEA for Espresso (Mac);

Partial Support (“Expand Abbreviation” Only)

  • TextMate (Mac, and can be used with E-text editor for Windows);
  • TopStyle;
  • Sublime Text;
  • GEdit;
  • editArea online editor;

Aptana is my primary development environment, and it uses a JavaScript version of Zen Coding. It also contains many more tools that I use for routine work. Every new version of Zen Coding will be available for Aptana first, then ported to Python and made available to other editors.

The Coda and Espresso plug-ins are powered by the excellent Text Editor Actions (TEA) platform, developed by Ian Beck. The original source code is available at GitHub, but I made my own fork to integrate Zen Coding’s features.

Conclusion

Many people who have tried Zen Coding have said that it has changed their way of creating Web pages. There’s still a lot of work to do, many editors to support and much documentation to write. Feel free to browse the existing documentation and source code to find answers to your questions. Hope you enjoy Zen Coding!

www.smashingmagazine.com

You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.