Mixins

Mixins allow you to create reusable blocks of Pug.

  1. //- Declaration
  2. mixin list
  3. ul
  4. li foo
  5. li bar
  6. li baz
  7. //- Use
  8. +list
  9. +list
  1. <ul>
  2. <li>foo</li>
  3. <li>bar</li>
  4. <li>baz</li>
  5. </ul>
  6. <ul>
  7. <li>foo</li>
  8. <li>bar</li>
  9. <li>baz</li>
  10. </ul>

Mixins are compiled to functions, and can take arguments:

  1. mixin pet(name)
  2. li.pet= name
  3. ul
  4. +pet('cat')
  5. +pet('dog')
  6. +pet('pig')
  1. <ul>
  2. <li class="pet">cat</li>
  3. <li class="pet">dog</li>
  4. <li class="pet">pig</li>
  5. </ul>

Mixin Blocks

Mixins can also take a block of Pug to act as the content:

  1. mixin article(title)
  2. .article
  3. .article-wrapper
  4. h1= title
  5. if block
  6. block
  7. else
  8. p No content provided
  9. +article('Hello world')
  10. +article('Hello world')
  11. p This is my
  12. p Amazing article
  1. <div class="article">
  2. <div class="article-wrapper">
  3. <h1>Hello world</h1>
  4. <p>No content provided</p>
  5. </div>
  6. </div>
  7. <div class="article">
  8. <div class="article-wrapper">
  9. <h1>Hello world</h1>
  10. <p>This is my</p>
  11. <p>Amazing article</p>
  12. </div>
  13. </div>

Mixin Attributes

Mixins also get an implicit attributes argument, which is taken from the attributes passed to the mixin:

  1. mixin link(href, name)
  2. //- attributes == {class: "btn"}
  3. a(class!=attributes.class href=href)= name
  4. +link('/foo', 'foo')(class="btn")
  1. <a class="btn" href="/foo">foo</a>
Note

The values in attributes by default are already escaped! You should use != to avoid escaping them a second time. (See also unescaped attributes.)

You can also use mixins with &attributes:

  1. mixin link(href, name)
  2. a(href=href)&attributes(attributes)= name
  3. +link('/foo', 'foo')(class="btn")
  1. <a class="btn" href="/foo">foo</a>
Note

The syntax +link(class="btn") is also valid and equivalent to +link()(class="btn"), since Pug tries to detect if parentheses’ contents are attributes or arguments. Nevertheless, we encourage you to use the second syntax, as you pass explicitly no arguments and you ensure the first parenthesis is the arguments list.

Default Argument’s Values

You can also set default values for you arguments. Same as setting default function parameters in ES6.

  1. //- Declaration
  2. mixin article(title='Default Title')
  3. .article
  4. .article-wrapper
  5. h1= title
  6. //- Use
  7. +article()
  8. +article('Hello world')
  1. <div class="article">
  2. <div class="article-wrapper">
  3. <h1>Default Title</h1>
  4. </div>
  5. </div>
  6. <div class="article">
  7. <div class="article-wrapper">
  8. <h1>Hello world</h1>
  9. </div>
  10. </div>

Rest Arguments

You can write mixins that take an unknown number of arguments using the “rest arguments” syntax.

  1. mixin list(id, ...items)
  2. ul(id=id)
  3. each item in items
  4. li= item
  5. +list('my-list', 1, 2, 3, 4)
  1. <ul id="my-list">
  2. <li>1</li>
  3. <li>2</li>
  4. <li>3</li>
  5. <li>4</li>
  6. </ul>