Mixins allow you to create reusable blocks of Pug.
//- Declaration mixin list ul li foo li bar li baz //- Use +list +list
<ul> <li>foo</li> <li>bar</li> <li>baz</li> </ul> <ul> <li>foo</li> <li>bar</li> <li>baz</li> </ul>
Mixins are compiled to functions, and can take arguments:
mixin pet(name) li.pet= name ul +pet('cat') +pet('dog') +pet('pig')
<ul> <li class="pet">cat</li> <li class="pet">dog</li> <li class="pet">pig</li> </ul>
Mixins can also take a block of Pug to act as the content:
mixin article(title) .article .article-wrapper h1= title if block block else p No content provided +article('Hello world') +article('Hello world') p This is my p Amazing article
<div class="article"> <div class="article-wrapper"> <h1>Hello world</h1> <p>No content provided</p> </div> </div> <div class="article"> <div class="article-wrapper"> <h1>Hello world</h1> <p>This is my</p> <p>Amazing article</p> </div> </div>
Mixins also get an implicit attributes
argument, which is taken from the attributes passed to the mixin:
mixin link(href, name) //- attributes == {class: "btn"} a(class!=attributes.class href=href)= name +link('/foo', 'foo')(class="btn")
<a class="btn" href="/foo">foo</a>
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
:
mixin link(href, name) a(href=href)&attributes(attributes)= name +link('/foo', 'foo')(class="btn")
<a class="btn" href="/foo">foo</a>
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.
You can write mixins that take an unknown number of arguments using the “rest arguments” syntax.
mixin list(id, ...items) ul(id=id) each item in items li= item +list('my-list', 1, 2, 3, 4)
<ul id="my-list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>
© Pug authors
Licensed under the MIT license.
https://pugjs.org/language/mixins.html