Как в pug передавать блоку (бэм) каким элементом он является?

Question

[Кирилл]

Делаю первый проект с помощью pug и впервые делю его на компоненты. Столкнулся с такой проблемой.
допустим, есть блоки header, footer, и logo. Каждый блок находится в своей папке и имеет свой scss, pug и js файл если нужно.

logo.pug:
img.logo(src="img/logo.png")

Чтобы logo.pug был переиспользуемым я не должен давать ему позиционирование на класс logo. Но как сделать так, чтобы при include logo.pug внутрь header или footer блоку logo подставлялся класс header__logo или footer__logo в зависимости от контекста? попытался использовать миксины bemto, но данный вопрос решить не смог. Буду рад любым решениям, желательно простым для освоения и внедрения.

Answer 1

[inkShio]

logo.pug

mixin logo(className)
  img.logo(src="img/logo.png", class= className)

вывод

+logo()
+logo('header__logo')

Comments

[Кирилл]

выходит, мне нужно каждый переиспользуемый блок оборачивать в миксин и добавлять вместо инклюд так? +logo('header__logo') ? Даже не знаю, насколько это удобно

[inkShio]

Даже не знаю, насколько это удобно

А в чем не удобство? Как будет удобнее?

В index.pug
иклюдишь header.pug, footer.pug

в header.pug
иклюдишь component/input.pug
и вставляешь +input('search_big') там где должно выводиться

в footer.pug
иклюдишь component/input.pug
и вставляешь +input('search_small') там где должно выводиться

в component/input.pug просто миксин поля поиска

На примере поля поиска понятно вроде все.

[inkShio]

Посмотри как можно еще писать миксины, более удобный вариант, чем стандартный.

[Кирилл]

inkShio, это сложно для понимания пока что, чуть позже вернусь к этой ссылке, спасибо

[Кирилл]

inkShio, на самом деле решение нормальное, просто пугает что для каждого блока, которых предвидится много, нужно прописывать такой миксин. В целом это не сложно и наверно так и буду делать, просто хотелось бы писать поменьше))

[Кирилл]

inkShio, Чтобы не создавать новую тему, тут задам еще вопрос: есть ли автоматизация создания блоков и подключение их в собирающие файлы?

[inkShio]

Кирилл, не знаю, что ты подразумеваешь под автоматизацией создания блока.

Можешь поискать на гитхабе, там есть плагины что то типо bem-pug которые могут тебе понравиться.

P.S.
У меня такой подход, потому что использую emitty . Плагин который пересобирает только изменённые файлы, основываясь на include и extend. А так ты можешь подключить миксины в любой файл который будет инклюдиться на всех страницах, к примеру в header.pug

Answer 2

[Алекс Глебов]

.page
  .page__header
    +header
  .page__footer
    +footer

Comments

[Кирилл]

Честно говоря, я не понимаю как ваш комментарий отвечает на мой вопрос.

[Алекс Глебов]

Кирилл, тогда следует прочитать про бем, и узнать, что элементы родителя должны быть в своем блоке, а не передаваться в дочерний.