Плагин emmet для редактора sublime text позволяет быстро писать код для html иcss.
Для первоначальной разметки достаточно написать восклицательный знак и нажать кнопку tab.
Распакуется первоначальная структура документа.
Содержание статьи
Верстка дивов с emmet
С emmet удобно верстать дивы, для этого достаточно через точку написать название класса .icon и нажать tab.
1 |
.icon |
Дочерние элементы
Рассмотрим дочерние элементы.
Например, есть див с классом items, в нем вложены перечисления, пишем .items>ul>li*2 нажимаем tab.
расспакуется див, внутри будет вложение двух li.
1 |
.items>ul>li*2 |
Соединение элементов
Перечилсяем разные классы, а между ними ставим знак плюс.
Пример nav+.item>ul^span.
Значок ^ добавит span не в ul, а выше в дереве.
1 |
nav+.item>ul^span |
Группировка
Если мы сделаем .item1>(.item2+.item3), то увидим, что два item будут идти друг за другом.
1 |
.items1>(.item2+.item3) |
Умножение и нумерация
Если мы у li сделаем класс .class добавим знак нумерации $ и умножим * на 4. ul>li.class$*4.
Будет четыре класса у каждого li.
1 |
ul>li.class$*4 |
Использование фигурных и квадратных скобок
Допустим пишем ссылка на другой сайт.
Для emmet будет выглядеть так a[href=’ya.ru’] и tab распакуется как ссылка.
Свободный текст можно записывать в фигурных скобках.
Пишем див с классом .text{текст}, распакуем.
1 2 |
a[href='ya.ru'] .text{текст} |
Основные сокращения emmet в html
1 2 3 4 5 6 7 8 9 10 11 |
a link script:src img form input btn sect ol+ table+ c |
Вставляем в sublime text и напротив каждого сокращения нажимаем tab.
Основные сокращения emmet в css
Все сокращения emmet очень легко интуитивно догадаться, заучивать их не нужно.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
pos posa t r b l z fl d di dtc v ow cup mt mb p w h mh f fz ta tt lh bg bcg c bd lst ! @f @i cm trf |