Emmet, також відомий як Zen Coding - це найефективніший плагін для швидкого написання HTML і CSS коду, який коли-небудь існував. Завдяки йому, з простого вираження можна згенерувати цілий блок коду. Emmet, в цьому плані, обіцяє бути ще краще і зручніше.
Як працює Emmet?
HTML абревіатури
ініціалізатор
Отримати базову структуру HTML документа тепер можна менше ніж за одну секунду. Напишіть абревіатуру html: 5 або просто. натисніть клавішу Tab і через мить ви побачите повноцінний базовий код з доктайпів HTML5.
- html: 5 або. - HTML5
- html: xt - XHTML transitional
- html: 4s - HTML4 strict
Додавання класів, id-шек, тексту і атрибутів
Оскільки синтаксис Emmet дуже схожий на CSS селектори, то зрозуміти, як ним користуватися, дуже просто. Спробуйте поекспериментувати з якимось елементом (наприклад, p) і ідентифікатором (наприклад, p # description)
Також ви можете комбінувати класи і ідентифікатори. Наприклад, вираз p.bar # foo перетвориться в:
Тепер давайте подивимося, як додати текст і атрибут. Для того щоб задати елементу якийсь текст, його значення пишемо в фігурних дужках. Наприклад h1 перетвориться в:
Квадратні дужки використовуються для додавання атрибутів і їх значень. Наприклад, a [href = #] перетвориться в:
вкладеність елементів
Завдяки Emmet і синтаксису написання вкладених виразів, ви можете повністю створити повноцінний html документ, скориставшись однією абревіатурою. Батьківський елемент ставиться перед знаком>, а всі внутрішні елементи повинні йти за ним. Знак + дозволяє з'єднати кілька абревіатур, так що згенерований код буде йти один за одним. Новий оператор під знаком ^ дозволяє піднятися на один рівень вище.
угруповання
Часто можна трохи заплутатися, коли ви пишете великі абревіатури. Для того щоб цього уникнути, можна скористатися угрупованням. Наприклад, (.foo> h1) + (. Bar> h2) перетвориться в:
Підстановка назв тегів
Для того щоб створити div блок з класом item, досить перетворити абревіатуру div.item.
У минулому написання подібних виразів було спрощено. Наприклад, щоб отримати той же
. можна було написати абревіатуру .item. Emmet в цьому плані став ще більш просунутим. Тепер плагін може автоматично визначати, який тег потрібно підставити в залежності від батька. Тобто якщо ми перетворимо абревіатуру .item всередині списку- . то абревіатура перетвориться в . замість . як це було раніше.
- li для ul і ol
- tr для table, tbody, thead і tfoot
- td для tr
- option для select і optgroup
Ось невелика шпаргалка:
Також, за допомогою знака *. ви можете визначити, скільки разів повинен друкуватися потрібний вам елемент. Таким чином, абревіатура ul> li * 3 перетвориться в:
Як на рахунок комбінації оператора множення і нумерації? Жодних проблем! Просто поставте знак $ в кінці назви атрибута або елемента і буде вам щастя! Наприклад, ul> li.item $ * 3 перетвориться в:
Спробуйте самі!
CSS абревіатури
Emmet призначений для спрощення написання не тільки HTML, але і CSS коду. Наприклад, ви хочете задати елементу ширину. Для цього просто напишіть w100:
Значення px ставиться за замовчуванням. Для іншої одиниці виміру використовуйте спеціальні символи. Наприклад h10p + m5e:
Варіанти вибору:
Додаткові опції
Наприклад, за допомогою виразу @f. ви можете отримати код:
В даному випадку, такі опції як background-image, border-radius, font, @ font-face, text-outline, text-shadow можуть бути додані, якщо до вираження приписати знак +. Наприклад, @ f + перетворюється в:
автоматичний пошук
Emmet також може здійснити пошук потрібного значення, якщо ви не зовсім вірно написали вираз. Плагін буде шукати саме схоже вираз: наприклад, абревіатури ov: h, ovh, ovh і oh перетворюються в один і той же код:
CSS3 префікси
CSS3 звичайно дуже крутий, але запам'ятати всі існуючі префікси просто неможливо! Ну і не треба! Emmet і тут надасть нам допомогу. Наприклад, слово trs буде перетворено в:
Також ви можете приписати свої префікси. Наприклад, -super-foo перетвориться в:
Що якщо вам потрібні тільки кілька з існуючих префіксів? Немає проблем, просто вкажіть перші літери їхніх назв: -wm-trf перетворюється в:
Якщо говорити про CSS3, то не можна обійти стороною градієнти. Всі ті складні вирази, що ви писали вручну, можна замінити на одну абревіатуру. Наприклад, lg (left, #fff 50%, # 000) перетвориться в:
Додаткові можливості
Lorem Ipsum
З Emmet ви можете забути про онлайн сервісі Lorem Ipsum. Тепер для цього є спеціальна абревіатура: lorem або ipsum. Також ви можете вказати, скільки слів потрібно згенерувати. Наприклад, lorem10 перетворюється в:
Також lorem ipsum можна змішати з іншими елементами. Наприклад, p * 3> lorem5:
Налаштування під себе
Emmet дає нам можливість змінити великий спектр налаштувань плагіна. Для цього потрібно буде відредагувати три файли:
Для додавання нового виразу або зміни вже існуючого відредагуйте файл snippets.json
Для перетворення роботи фільтрів і дій спробуйте змінити файл preferences.json
Для контролю відображення HTML і XML коду, редагуйте файл syntaxProfiles.json
Офіційну сторінку плагіна можна знайти тут. Також у вашому розпорядженні документація і шпаргалка
А що скажете ви?
Чи користуєтеся ви даними плагіном? Якщо так, то які ваші улюблені фішки? Діліться досвідом!
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!