Быстрая верстка в sublime text с плагином emmet

Плагин emmet для редактора sublime text позволяет быстро писать код для html иcss.

Для первоначальной разметки достаточно написать восклицательный знак и нажать кнопку tab.

Распакуется первоначальная структура документа.

Верстка дивов с emmet

С emmet удобно верстать дивы, для этого достаточно через точку написать название класса .icon и нажать tab.

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

Рассмотрим дочерние элементы.

Например, есть див с классом items, в нем вложены перечисления, пишем .items>ul>li*2 нажимаем tab.

расспакуется див, внутри будет вложение двух li.

Соединение элементов

Перечилсяем разные классы, а между ними ставим знак плюс.

Пример nav+.item>ul^span.

Значок ^ добавит span не в ul, а выше в дереве.

Группировка

Если мы сделаем .item1>(.item2+.item3), то увидим, что два item будут идти друг за другом.

Умножение и нумерация

Если мы у li сделаем класс .class добавим знак нумерации $ и умножим * на 4. ul>li.class$*4.

Будет четыре класса у каждого li.

Использование фигурных и квадратных скобок

Допустим пишем ссылка на другой сайт.

Для emmet будет выглядеть так a[href=’ya.ru’] и tab распакуется как ссылка.

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

Пишем див с классом .text{текст}, распакуем.

Основные сокращения emmet в html

Вставляем в sublime text и напротив каждого сокращения нажимаем tab.

Основные сокращения emmet в css

Все сокращения emmet очень легко интуитивно догадаться, заучивать их не нужно.