Mixin vs. Include в Pug?

Question

[feelsgood]

Что лучше подходит для переиспользования разных структур разметки в Pug.js, например при использовании компонентного подхода в верстке? Допустим есть кнопка, которая может быть:

button.btn.btn--default Submit
button.btn.btn--disable Send
...

Лучше использовать миксин, что вроде:

mixin btn(type)
	button.btn(class=`btn--${type}`) Text

и втыкать его в нужные места:

+btn('default')
+btn('disable')

Или лучше создавать файлы с нужной разметкой и вставлять с помощью include?

btn-default.pug
btn-disable.pug

Понятно, что дело одними кнопками не ограничивается и предполагается переиспользовать более сложную разметку

Answer 1

[Константин Китманов]

В миксин явно передаются параметры, и это великое счастье. Если вы попытаетесь эмулировать миксины инклюдами, то вы быстро столкнетесь с таким кодом:

- var buttonTitle = "кнопка";
- var buttonSmall = "small";
- var buttonType = "danger";
- var icon = "trash";
include 'includes/button'

Представьте две или три такие кнопки рядом. Вы все еще хотите делать это инклюдами? А если надо в кнопку передать кастомную верстку? С инклюдами это вообще невозможно.

Инклюдами можно только подключать эти самые миксины, имхо.

Answer 2

[Олег]

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