htmllessons.ru

Плагин Emmet для быстрой верстки
Я думаю все знают, что такое emmet. А если кто-то не знает, Emmet позволяет из строки, сделать полноценный многострочный код. В этой статье постараюсь максимально быстро рассказать что это и как его использовать с примерами. Погнали!
Все очень просто, Вы пишите строку нажимаете Tab и магия! Все разворачивается.
Основные действия:
Дочерний блок:
Меню с одним элементом
Соседние элементы:
Секция с 2 заголовками и 1 описанием
Возврат на элемент выше (можно использовать больше одного):
Умножение:
Меню с 3 элементами
Группировка (можно делать группа в группе):
Редко используемый элемент, схож с элементом возврата
Шапка + Футер
Операторы атрибуции:
ID и классы:
Кастомные атрибуты:
Счетчик:
Изменение нумерации:
Текстовая информация:
Важно, нельзя использовать пробел между элементами. Для Emmet пробел это знак остановки.
Такая запись не будет работать! ((header > ul.nav > li*5) + footer)
Emmet также может генерировать рыбный текст, нужно написать lorem или loremru и нажать tab
В CSS принцип тот же, если я буду рассказывать про все сокращения, то статья получится на 10 000 строк, поэтому я оставлю ссылку на все сокращения Emmet.
Чтобы более подробно разобраться в данной теме "Плагин Emmet для быстрой верстки" советую посмотреть наше видео на эту тему:
Хочешь научиться создавать сайты? Изучи все на практике, с помощью интерактивных курсов у нас на проекте. Регистрация - Войти - Наши курсы. Задавайте вопросы в комментариях!