Pugでmixinを使用する

Pugでmixinを使用する方法をメモ。

サンプルコード

greetという名前でmixinを作成してみます。

index.pug

// mixinを定義
mixin greet
  p 花さん こんにちは

// 出力
+greet

以下のように出力することができました。

index.html

<p>花さん こんにちは</p>

別ファイルでmixinを定義して使用することもできます。

mixin/_greet.pug

// mixinを定義
mixin greet
  p ひなたさん こんにちは

定義したファイルをインクルードすることで使用できます。

index.pug

// mixinファイルの読み込み
include mixin/_greet.pug

// 出力
+greet

出力すると以下のようになります。

index.html

<p>ひなたさん こんにちは</p>

mixinに引数を設定することもできます。

mixin/_greet.pug

// mixinを定義
mixin greet(name)
  p #{name}さん こんにちは

mixinの呼び出し時に引数を設定します。

index.pug

// mixinファイルの読み込み
include mixin/_greet.pug

// 出力
+greet('乃愛')

引数で設定した内容で出力できました。

index.html

<p>乃愛さん こんにちは</p>

引数の初期値も設定できるようです。

mixin/_greet.pug

// mixinを定義
mixin greet(name='みやこ')
  p #{name}さん こんにちは

引数を設定した場合と設定していない場合で試してみます。

index.pug

// mixinファイルの読み込み
include mixin/_greet.pug

// 出力
+greet('小依')
+greet

以下のように出力することができました。

index.html

<p>小依さん こんにちは</p>
<p>みやこさん こんにちは</p>

Rest引数も使用できます。

index.pug

// mixinを定義
mixin characters(title, ...items)
  h1= title
  ul
    each item in items
      li= item

// 出力
+characters('私に天使が舞い降りた！', '星野 みやこ', '白咲 花', '星野 ひなた', '姫坂 乃愛', '種村 小依', '小之森 夏音')

以下のように出力できました。

index.html

<h1>私に天使が舞い降りた！</h1>
<ul>
  <li>星野 みやこ</li>
  <li>白咲 花</li>
  <li>星野 ひなた</li>
  <li>姫坂 乃愛</li>
  <li>種村 小依</li>
  <li>小之森 夏音</li>
</ul>

Pugのブロックをコンテンツとして扱うこともできます。

index.pug

// mixinを定義
mixin introduce(name)
  dl.introduce
    dt= name
    dd
      if block
        block
      else
        p 特にありません。

// 出力
+introduce('夏音')

+introduce('みやこ')
  p 9月9日生まれです。
  p CV上田麗奈です。

index.html

<dl class="introduce">
  <dt>夏音</dt>
  <dd>
    <p>特にありません。</p>
  </dd>
</dl>
<dl class="introduce">
  <dt>みやこ</dt>
  <dd>
    <p>9月9日生まれです。</p>
    <p>CV上田麗奈です。</p>
  </dd>
</dl>

【参考サイト】

• Mixins – Pug