Mixin

Mixinを使うと、再利用可能なPugのブロックを作成できます。

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>
<ul>
  <li>foo</li>
  <li>bar</li>
  <li>baz</li>
</ul>

Mixinは関数にコンパイルされ、引数を取ることができます。

<ul>
  <li class="pet">cat</li>
  <li class="pet">dog</li>
  <li class="pet">pig</li>
</ul>

Mixinブロック

Mixinは、コンテンツとして機能するPugのブロックを取ることもできます。

<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>

Mixinの属性

Mixinは、Mixinに渡された属性から取得される暗黙的な`attributes`引数も取得します。

<a class="btn" href="/foo">foo</a>

注意

デフォルトでは、`attributes`の値はすでにエスケープされています！ 二重にエスケープされないように、`!=`を使用する必要があります。（エスケープされていない属性も参照してください。）

`&attributes`を使用してMixinを使用することもできます。

<a class="btn" href="/foo">foo</a>

注意

`+link(class="btn")`という構文も有効であり、`+link()(class="btn")`と同等です。これは、Pugが括弧の内容が属性か引数かを検出しようとするためです。それでも、明示的に引数を渡さず、最初の括弧が引数リストであることを保証するため、2番目の構文を使用することをお勧めします。

デフォルトの引数値

`arguments`にデフォルト値を設定することもできます。ES6で*デフォルトの関数パラメータ*を設定するのと同じです。

<div class="article">
  <div class="article-wrapper">
    <h1>Default Title</h1>
  </div>
</div>
<div class="article">
  <div class="article-wrapper">
    <h1>Hello world</h1>
  </div>
</div>

残余引数

「残余引数」構文を使用して、不明な数の引数を取るMixinを記述できます。

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

Mixin

Mixinブロック ¶

Mixinの属性 ¶

注意

注意

デフォルトの引数値 ¶

残余引数 ¶

Mixinブロック

Mixinの属性

デフォルトの引数値

残余引数