Mixins

  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">dog</li>
  3.   <li class="pet">pig</li>
  4. </ul>

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

  1. <div class="article">
  2.   <div class="article-wrapper">
  3.     <h1>Hello world</h1>
  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>
  1. mixin link(href, name)
  2.   //- attributes == {class: "btn"}
  3.   a(class!=attributes.class href=href)= name
  5. +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 .)

You can also use mixins with &attributes:

  1. <a class="btn" href="/foo">foo</a>
Note

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

  1. mixin article(title='Default Title')
  2.   .article
  3.     .article-wrapper
  4.       h1= title
  6. //- Use
  7. +article()
  9. +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>

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

  1. <ul id="my-list">
  2.   <li>1</li>
  3.   <li>2</li>
  4.   <li>3</li>
  5. </ul>