При верстке сайтов мы давно используем eCSStractor - полезный плагин, ускоряющий разработку в разы. Зачем переписывать классы вручную, если за вас это может сделать плагин?
Чтобы установить eCSStractor, нужно в поиске MARKETPLACE VSCode ввести название и выбрать нужный плагин. В нашем случае полное название плагина eCSStractor for VSCode, его и устанавливаем:
В настройках плагина все достаточно просто. Самым главным пунктом является:
Ecsstractor_port: Destination
Where to put result
Здесь нужно выбрать clipboard, для копирования стилей в буфер обмена. Остальные настройки зависят от стиля верстки. Можно использовать БЭМ, можно оставлять комментарии к каждму классу и т.д.
Во время верстки мы поступаем просто. Прописываем структуру блока и нажатием правой кнопки мыши вызываем меню:
Далее просто вставляем код из буфера обмена в ваш CSS или SCSS файл.
.home {
// .home__inner
&__inner {
}
// .home__item
&__item {
}
// .home__link
&__link {
}
// .home__text
&__text {
}
}
.container {
}
С настройками, которые мы установили в eCSStractor, на выходе получили вот такой SCSS код, что упрощает верстку во много раз.
Иногда случается что на Linux eCSStractor не может скопировать (не копирует) код в буфер обмена. Так как в плагине используется api редактора для копирования в буфер обмена, а в линукс 2 буфера обмена clipboard и primary. Решается этот вопрос достаточно просто:
sudo apt update
sudo apt install xclip
Подробный разбор настроек в нашей следующей статье!
Верстайте быстро и качественно!
