Статьи

Более быстрый рабочий процесс: мастеринг Эммета, часть 2

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

Emmet доступен для очень многих текстовых редакторов, но я буду использовать SublimeText , очень популярный и многофункциональный текстовый редактор. Если вы используете другой текстовый редактор, проверьте документацию по адресу http://emmet.io/download/ .

Установка Emmet в SublimeText

Для установки Emmet в SublimeText необходимо выполнить два шага. Сначала я установлю Package Control для SublimeText, а затем я установлю плагин Emmet.

Шаг 1. Установите пакет управления

С SublimeText Package Control мы можем легко установить новые плагины. После установки SublimeText зайдите на сайт https://sublime.wbond.net/installation, чтобы скопировать код для SublimeText2 или SublimeText3 – какую бы версию вы не использовали – нажмите ctrl+` или перейдите в« View > Show Console . После открытия вставьте соответствующий код для вашей версии SublimeText в консоль. После завершения установки перезапустите SublimeText.

Шаг 2: Установите плагин Emmet

После перезапуска SublimeText перейдите в « Preferences > package Control и введите « install package . В появившемся окне введите / найдите Emmet и выберите, чтобы установить его. После завершения установки перезапустите SublimeText, чтобы изменения вступили в силу.

Начало работы с Эмметом

Если вы никогда не использовали Emmet, вы знаете, что написание HTML-кода занимает много времени. Давайте предположим, что вы создаете новый HTML-файл и вам нужны некоторые необходимые теги html, head, title, body с HTML5 doctype , например:

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

У вас может быть шаблон по умолчанию для начала, или, возможно, вы сохраняете код и просто копируете и вставляете код каждый раз. Если вы делаете это, вы тратите свое драгоценное время. С Emmet создание кода выше займет около двух или трех секунд. Создайте новый файл и сохраните его как .html (например, index.html) и введите html:5 или ! и нажмите tab , или ctrl+e или любую другую клавишу триггера в текстовом редакторе, чтобы развернуть аббревиатуру, и у вас будет HTML5 doctype и несколько необходимых тегов.

В SublimeText Tab есть ключ, используемый для расширения аббревиатур. Давайте начнем с некоторых основ, а позже мы узнаем о более сложных примерах. Создайте новый файл с SublimeText, сохраните его как emmet.html или index.html. Теперь введите HTML:5 или ! и нажмите Tab и вы получите базовый HTML-код для нашей страницы.

Некоторые полезные ярлыки HTML

Есть так много ярлыков для HTML и CSS, вот некоторые из наиболее широко используемых.

1: Основная разметка с HTML5 Doctype

 !  или html:5 

расширяется до

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

2: скрипт с источником

 script:src 

расширяется до

 <script src=""></script> 

3: X-UA-совместимый метатег

 meta:compat 

расширяется до

 <meta http-equiv="X-UA-Compatible" content="IE=7"> 

4: мета-порт viwe

 meta:vp 

расширяется до

 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 

5: стиль CSS

 style 

расширяется до

 <style></style> 

6: Связывание favicon

 link:favicon 

расширяется до

 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> 

7: Ссылка для RSS

 link:rss 

расширяется до

 <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml"> 

8: ссылка для атома

 link:atom 

расширяется до

 <link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml"> 

9: тег привязки

 a 

расширяется до

 <a href=""></a> 

10: ссылка со значением по умолчанию

 a:link 

расширяется до

 <a href="http://"></a> 

11: почта для ссылки

 a:mail 

расширяется до

 <a href="mailto:"></a> 

12: изображение

 img 

расширяется до

 <img src="" alt=""> 

13: Форма с методом get

 form:get 

расширяется до

 <form action="" method="get"></form> 

14: Форма с методом сообщения

 form:post 

расширяется до

 <form action="" method="post"></form> 

15: ввод по умолчанию

 input 

расширяется до

 <input type="text"> 

16: вход скрыт

 input:hidden 

расширяется до

 <input type="hidden" name=""> 

17: кнопка

 btn 

расширяется до

 <button></button> 

18: кнопка отправки

 btn:s 

расширяется до

 <button type="submit"></button> 

19: Необходимая таблица разметки

 table+ 

расширяется до

 <table> <tr> <td></td> </tr> </table> 

20: Слепой Элемент

 select+ 

расширяется до

 <select name="" id=""> <option value=""></option> </select> 

21: условные стили для IE6

 cc:ie6 

расширяется до

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

22: условные стили для IE

 cc:ie 

расширяется до

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

23: условные стили для браузеров без IE

 cc:noie 

расширяется до

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

Эммет Шпаргалка

Это всего лишь несколько тегов, которые часто используются веб-разработчиками. Вы можете просмотреть полный список поддерживаемых синтаксисов по адресу http://docs.emmet.io/cheat-sheet/ .

Таблицы стилей CSS

Вы можете легко добавить CSS по умолчанию или печатать таблицы стилей. Просто введите link для базовой ссылки, link:CSS для файла style.css по умолчанию и link:print для таблицы стилей печати. Вы можете переопределить значения атрибутов по умолчанию и добавить новые. Дочерние элементы также могут быть добавлены.

1. Базовая ссылка CSS

Link 

преобразуется в следующий код с табуляцией внутри пустого атрибута href="" .

	<link rel="stylesheet" href=""> 

2. Связывание ссылки по умолчанию style.css

Link:css 

превратится в следующий код

 <link rel="stylesheet" href="style.css"> 

3. Связывание таблицы стилей печати

Link:print 

превратится в.

 <link rel="stylesheet" href="print.css" media="print"> 

4. Переопределение атрибута по умолчанию

 link[rel=prefetch title="Hello world"] 

расширяется до

 <link rel="prefetch" href="" title="Hello world"> 

5. Добавление дочерних элементов

link>xsl:apply-templates 

расширяется до

 <link rel="stylesheet" href=""> <xsl:apply-templates></xsl:apply-templates> </link> 

Понимание CSS-подобных сокращений

Сокращения в Emmet делают написание утомительного кода разметки быстрым. Сокращения оптимизированы для генерации HTML и XML, но не ограничиваются ими. Синтаксис аббревиатур выглядит как селекторы CSS, поэтому вам не составит труда выучить его, если вы знакомы с CSS.

Давайте использовать сокращения для создания некоторой базовой разметки HTML для нашей веб-страницы с заголовками, разделами основного и нижнего колонтитула с необходимыми классами.

Давайте начнем с очень простого примера. просто введите

 header#site-header 

и ты увидишь

 <header id="site-header"></header> 

Если вы печатаете

 header#site-header>h1.logo>a{site name} 

и нажмите Tab, он расширится до

 <header id="site-header"> <h1 class="logo"><a href="">site name</a></h1> </header> 

Основная разметка для страницы

Чтобы создать веб-страницу с необходимой основной разметкой, введите следующий код и нажмите клавишу Tab или Ctrl + E в редакторе.

 header#site-header^div.container#main>.primary+aside#sidebar^footer#site-footer 

Вышеуказанное сокращение создаст следующую разметку. Как вы видите, у нас есть три раздела для нашей страницы: сначала у нас есть header с идентификатором site-header , затем у нас есть основной div с классом .container и id main , а затем у нас есть раздел нижнего колонтитула с Идентификатор site-footer . Вы можете применять идентификаторы и классы к любым элементам, как я применил к нашему <div class="container" id="main">

 <header id="site-header"></header> <div class="container" id="main"> <div class="primary"></div> <aside id="sidebar"></aside> </div> <footer id="site-footer"></footer> 

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

 (header#site-header>h1.logo>a[href=#]{site name})^div.container#main>(.primary>h1.post-title{post title here}+img.featured-img+p{post text here})+(aside#sidebar>#widget>h2.widget-title+p{widget text})^footer.#site-footer>.col-4.widget*3>h2.widget-title+p.widget-text 

Приведенный выше код сгенерирует следующую разметку HTML:

 <header id="site-header"> <h1 class="logo"><a href="#">site name</a></h1> </header> <div class="container" id="main"> <div class="primary"> <h1 class="post-title">post title here</h1> <img src="" alt="" class="featured-img"> <p>post text here</p> </div> <aside id="sidebar"> <div id="widget"> <h2 class="widget-title"></h2> <p>widget text</p> </div> </aside> </div> <footer class="" id="site-footer"> <div class="col-4 widget"> <h2 class="widget-title"></h2> <p class="widget-text"></p> </div> <div class="col-4 widget"> <h2 class="widget-title"></h2> <p class="widget-text"></p> </div> <div class="col-4 widget"> <h2 class="widget-title"></h2> <p class="widget-text"></p> </div> </footer> в <header id="site-header"> <h1 class="logo"><a href="#">site name</a></h1> </header> <div class="container" id="main"> <div class="primary"> <h1 class="post-title">post title here</h1> <img src="" alt="" class="featured-img"> <p>post text here</p> </div> <aside id="sidebar"> <div id="widget"> <h2 class="widget-title"></h2> <p>widget text</p> </div> </aside> </div> <footer class="" id="site-footer"> <div class="col-4 widget"> <h2 class="widget-title"></h2> <p class="widget-text"></p> </div> <div class="col-4 widget"> <h2 class="widget-title"></h2> <p class="widget-text"></p> </div> <div class="col-4 widget"> <h2 class="widget-title"></h2> <p class="widget-text"></p> </div> </footer> 

Теперь внимательно посмотрите на приведенный выше код и обратите внимание на функции и символы, которые я использовал для генерации приведенного выше кода. Я использовал скобки () для группировки секции заголовка, затем я использовал ^ чтобы подняться на одну секцию вверх, чтобы отделить заголовок и контейнер #main. Чтобы сделать вышеупомянутое длинное сокращение более простым, давайте разберем его на три части.

Эта аббревиатура будет генерировать разметку для раздела заголовка:

 (header#site-header>h1.logo>a[href=#]{site name})^ 

Эта аббревиатура будет генерировать разметку для основного раздела:

 div.container#main>(.primary>h1.post-title{post title here}+img.featured-img+p{post text here})+(aside#sidebar>#widget>h2.widget-title+p{widget text})^ 

Эта аббревиатура будет генерировать разметку для раздела нижнего колонтитула:

 footer.#site-footer>.col-4.widget*3>h2.widget-title+p.widget-text 

Вы можете видеть, что я использовал () и ^ несколько раз, чтобы разделить разделы и создать более сложный код.

В третьей части я расскажу о синтаксисе и функциях.