Плагин Emmet для быстрой верстки

Я думаю все знают, что такое emmet. А если кто-то не знает, Emmet позволяет из строки, сделать полноценный многострочный код. В этой статье постараюсь максимально быстро рассказать что это и как его использовать с примерами. Погнали!

Все очень просто, Вы пишите строку нажимаете Tab и магия! Все разворачивается.

Основные действия:

 

Дочерний блок:

Меню с одним элементом

Соседние элементы:

Секция с 2 заголовками и 1 описанием

Возврат на элемент выше (можно использовать больше одного):

Умножение:

Меню с 3 элементами

Группировка (можно делать группа в группе): 

Редко используемый элемент, схож с элементом возврата

Шапка + Футер

Операторы атрибуции:

ID и классы:

Кастомные атрибуты:

Счетчик:

Изменение нумерации:

Текстовая информация:

Важно, нельзя использовать пробел между элементами. Для Emmet пробел это знак остановки.

Такая запись не будет работать! ((header > ul.nav > li*5) + footer)

 

Emmet также может генерировать рыбный текст, нужно написать lorem или loremru и нажать tab

В CSS принцип тот же, если я буду рассказывать про все сокращения, то статья получится на 10 000 строк, поэтому я оставлю ссылку на все сокращения Emmet.

Чтобы более подробно разобраться в данной теме "Плагин Emmet для быстрой верстки" советую посмотреть наше видео на эту тему:

Хочешь научиться создавать сайты? Изучи все на практике, с помощью интерактивных курсов у нас на проекте. Регистрация - Войти - Наши курсы. Задавайте вопросы в комментариях!