Mixins let you define reusable pieces of template markup.

mixin button(label)
  button.button= label

+button("Save")
+button("Cancel")

Arguments

Mixins can accept multiple arguments.

mixin userCard(name, role)
  article.card
    h2= name
    p= role

Mixin Blocks

A mixin can also accept nested content.

mixin panel(title)
  section.panel
    h2= title
    if block
      .panel-content
        block
    else
      p Nothing to display.

+panel("Account")
  p Your account details appear here.

Reusable components

Mixins are especially useful for repeated UI patterns such as navigation links, cards, buttons, lists and form controls.

They can also accept attributes and default argument values.