Mixins (The Pit Crew)

Specialized Tools

In the pit lane, we don’t build a new tire wrench for every car. We use standard, reusable tools. In Pug, these are called Mixins. They function like JavaScript functions but for HTML structure. You define a template “tool” once and strictly reuse it.

Defining a Mixin

Use the mixin keyword followed by the name and optional arguments into parentheses.

//- Definition
mixin petCard(pet)
  .card
    .card-header
      h2= pet.name
    .card-body
      p Breed: #{pet.breed}
      p Age: #{pet.age}

Using a Mixin

To “call” the mixin, use the + symbol. This is the implementation trigger.

//- Usage
+petCard({ name: "Drago", breed: "Doberman", age: 4 })
+petCard({ name: "Rex", breed: "German Shepherd", age: 2 })

Mixin Blocks

Mixins can also accept a block of content, allowing you to wrap custom HTML inside a reusable container.

mixin modal(title)
  .modal
    h3= title
    .modal-content
      if block
        block
      else
        p No content provided.

//- Usage
+modal("Security Alert")
  p Unauthorized entry detected in Sector 7.
  button.btn-lockdown Seal Doors

---

Extra Bits & Bytes

Pug Mixins and Layouts - GitHub Repo

---

⏭ The Master Chassis

Mixins handle small components. But what about the main frame?

Next Lap: Layouts, Extends, and Blocks (layout.pug).