HTMLテンプレートのPugを使えば、より効率的なコーディングができるようになります。

今回はmixinの使い方です!

mixin

基本の形は、以下の通り。mixinを宣言したら、”+”+mixin名で使用します。

mixin list
  ul
    li item1
    li item2
    li item3

+list
<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

引数

引数を取ることができます。デフォルト値を設定することもできます。

mixin fruit(name, cat='fruit')
  li(class=cat)= name
ul
  +fruit('orange')
  +fruit('banana')
  +fruit('cabbage', 'vegetable')
<ul>
  <li class="fruit">orange</li>
  <li class="fruit">banana</li>
  <li class="vegetable">cabbage</li>
</ul>

ブロック

mixinを宣言するときに”block”と書いた部分に、任意のブロックを入れることができます。

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>

Rest Arguments

不特定数の引数を取って繰り返し処理することができます。

mixin list(id, ...items)
  ul(id=id)
    each item in items
      li= item
+list('my-list', 'orange', 'banana', 'cabbage', 'cucumber')
<ul id="my-list">
  <li>orange</li>
  <li>banana</li>
  <li>cabbage</li>
  <li>cucumber</li>
</ul

参照:Mixins – Pug