Получать рассылку по электронной почте

Введите свой email-адрес:

Delivered by FeedBurner

Навигация

Ускорение верстки с помощью ZenCoding / Emmet

emmet

Возможности Emmet

Как же действует Emmet? Оформление для html-разметки задается при помощи таблиц стилей. Для того, чтобы указать какие-то свойства для того или иного тега, мы пишем разнообразные конструкции из селекторов, обозначающих эти теги, например span>a, p+div

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

Допустим, нам нужен код списка с вложенными ссылками. Если писать это все вручную, то процесс займет много времени, особенно при большом количестве элементов списка. Поэтому перекладываем эту функцию на Emmet. Указываем css-подобную комбинацию селекторов, ul>li*5>a, даем команду Expand Abbreviation и вуаля, получаем кусок html-кода вида

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

Общий синтаксис

Дочерние элементы

В примере выше мы уже использовали оператор >, который нужен, чтобы обозначить вложенные друг в друга элементы. Вот еще простой пример

получается

Сестринские элементы

Оператор +  служит для вывода элементов одного уровня, которые не вложены друг в друга, а просто находятся рядом.

будет выведено

Умножение

Тут есть отличие от CSS – оператор * показывает сколько нужно создать элементов :

выводит

Группировка

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

Нумерация элементов

Оператор $ позволяет пронумеровать элементы. Нумерация предусмотрена внутри имени элемента, для имен атрибутов и значений атрибутов:

будет выведено

Разрешается вывод номеров из произвольного количества знаков, путем повторения $.

получится

Атрибуты тегов

Добавлять классы и id к выводимым элементам можно абсолютно по такому же принципу как и в CSS. Рассмотрим пример

будет выведено

Для любых других атрибутов нужно использовать вариант записи в квадратных скобках [attr], причем перечислять их разрешается столько, сколько захотите. Значения атрибутов можно указывать в двойных, одинарных кавычках, без кавычек,если нет пробелов или совсем не указывать.

 результат

Текст

С помощью фигурных скобок дается возможность вставлять текст в генерируемые элементы.

Генератор Lorem Ipsum

Для того, чтобы узнать, как будет выглядеть html-шаблон верстальщики используют так называемый текст-рыбу, как правило он произвольный, бессмысленный. Есть давняя традиция применения в качестве такого текста отрывка на латыни Lorem Ipsum…

В функционал плагина входит генератор Lorem, создающий текст из определенного количества слов, разделенных на несколько предложений. В примере задано 20 слов.

Рассмотрим теперь работу плагина Emmet более детально на примере  использования Notepad++, поскольку этот редактор наверное самый популярный.

Для начала нужно установить плагин. Попробуем сделать это через специальный менеджер. Для этого в выпадающем меню жмем раздел Плагины и находим пункт Plagin Manager. В открывшемся окошке переходим на вкладку Avaliable.

plagin-manager

Там вы увидите список плагинов, готовых к установке, в числе которых будет Emmet. Далее щелкаем по кнопке Install.

emmet-plugin

Теперь Emmet появился в выпадающем меню вместе с другими плагинами. Посмотрите какие  команды он способен выполнять.

команды-Emmet

Кстати вы можете настроить горячие клавиши для вызова команд, если вас не устраивают те, что стоят по умолчанию. В меню выбираем Опции | Горячие клавиши, далее кнопка Plugin commands и ищем  команды, которые хотим переназначить. Допустим, вы хотите вызывать команду Expand Abbreviation с помощью кнопки Tab. Кликаем Modify и в появившемся окошке задаем клавишу или сочетание клавиш.

опции-нотпад горячие-клавиши-Emmet

Полезные команды

Итак, осталось охарактеризовать самые интересные команды, которые умеет выполнять Emmet.

Еще одна интересная особенность Emmet – ускорение написания свойств стилей, т.е. он распознает не просто сокращение названия свойства (ну, например, h – height, m – margin, lh – line-height), а сокращение названия свойства и его значения (p30 – padding:30px;  fwb – font-weight:bold; и т.д.). Очень удобно! Конечно запомнить все эти сокращения труднее, но на первом этапе для таких случаев можно просто использовать подсказку.

Шпаргалка Emmet / Zen Coding (Cheetsheet)

Cheat Sheet

ZenCodingCheatSheet

Понравилась статья?
Подпишитесь на RSS по e-mail
Поделитесь в социальных сетях
Вы можете также посмотреть
Добавить комментарий

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

*