Введение в Emmet — основные команды.

Как веб-разработчик, я всегда искали инструменты для увеличения скорости разработки и её производительность. Эта статья для веб-разработчиков, которые часто работают с HTML и CSS но еще не используют Emmet.

Установка

Emmet это плагин который помогает писать код на много быстрее. На оф.сайте Emmet можно скачать плагин для редактора который вы используете. Если вы используете Sublime Text, как я, Эммет может быть легко установлена ​​через Package Control.

install-emmet
image-166

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

Инициализация

С emmet на создание html документа уходят считанные секунды. Стоит ввести всего лишь ! или html:5 и клавишу Tab.

initializers
image-167

  • html:5 или ! для HTML5
  • html:xt для XHTML
  • html:4s для HTML4

Добавление классов, id и других атрибутов

Поскольку синтаксис Emmet похож на описание селекторов в CSS, пользоваться им очень просто.

classes-ids
image-168

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

<p class="bar" id="foo"></p>

Для содержания тегов используются фигурные скобки h1{foo}:

<h1>foo</h1>

А для атрибутов используются квадратные скобки a[href=#]:

<a href="#"></a>

texts-attrs
image-169

Вложенности

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

nesting
image-170

Группировка

Чтобы эффективно использовать вложения, не включая их в беспорядочное месиво операторов, вам необходимо группировать некоторые куски кода. Это как математика — нужно просто использовать скобки вокруг определенных частей. Например, (.foo> h1) + (. Бар> h2) получится:

<div class="foo">
  <h1></h1>
</div>
<div class="bar">
  <h2></h2>
</div>

grouping
image-171

Скрытие имен тегов

Набрав код .item вы получите:

<div class="item"></div>

Но теперь emmet умнее, если вы объявите .item внутри , он сгенерирует:

<li class="item"></li>

implicit-tags
image-172

Вот список всех неявных имен тегов:

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

Умножение

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

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

multiplication
image-173

Нумерация

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

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

numbering
image-174

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

Значение

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

width: 100px;

values
image-175

А команда h10p+m5e выведет:

height: 10%;
margin: 5em;

Вот список некоторых команд:

  • p → %
  • e → em
  • x → ex

Дополнительные параметры

Используя команды @f получим:

@font-face {
  font-family:;
  src:url();
}

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

@font-face {
  font-family: 'FontName';
  src: url('FileName.eot');
  src: url('FileName.eot?#iefix') format('embedded-opentype'),
     url('FileName.woff') format('woff'),
     url('FileName.ttf') format('truetype'),
     url('FileName.svg#FontName') format('svg');
  font-style: normal;
  font-weight: normal;
}

extra
image-176

Нестрогий поиск

Модуль CSS использует нестрогий поиск, чтобы найти неизвестную аббревиатуру. Так, каждый раз, когда вы вводите неизвестныю аббревиатуру, Emmet ищет ближайшее определение сниппета. Например: ov:h и ov-h и ovh и oh будет генерировать одно и то же:

overflow: hidden;

fuzzy-search
image-177

Префиксы

CSS3 отличная штука, но его префиксы очень сложные. Для них в Emmet есть тоже аббревиатуры. Например, аббревиатура trs даст нам:

-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

vendor-prefixes
image-178

Вы также можете добавить префиксы к любому виду элемента. Вам просто нужно использовать — префикс. Так,-super-foo получим:

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

Что делать, если вы не хотите, чтобы выводились все атрибуты? Нет проблем. Вы можете точно определить, какие браузеры необходимо поддерживать. Например, -wm-trf выведет:

-webkit-transform: ;
-moz-transform: ;
transform: ;
  • w → -webkit-
  • m → -moz-
  • s → -ms-
  • o → -o-

Градиент

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

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);

gradient
image-179

На последок…

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