Pug

Pugのミックスインを呼び出す方法

Pugとは

PugはHTMLを簡易的に記述できる個人的にとても画期的な記法です。最初は閉じタグがないことや、インデントでタグの入れ子階層を管理しているため難しいと感じるかもしれませんが、慣れてしまえばめちゃくちゃ見やすく、そして閉じタグをつけ忘れることがないので綺麗なHTMLを書くことができます。

もちろん吐き出す時にコンパイルが必要なので、開発環境はしっかり作らなくてはなりません。

今回やりたいこと

ベタ打ちのHTMLでは実現できないことがPugにはたくさんあります。その中の一つがミックスインです。Sassやejsを使ったことがある方は想像がつくかと思いますが、ミックスインの機能的な点では全く同じです。記述の効率化をすることができます。

ミックスインの定義

まずミックスインの定義方法です。


mixin text(message)
  p #{message}

Sassやejsと何ら変わりません。今回は例として「text」という名前のミックスインを作成しました。

ミックスインの呼び出し

これを以下のように呼び出します。


+text('Pugのテスト')

ミックスインを呼び出すときは「+」のあとにスペースを開けずにミックスイン名を記述します。そのまま()内に適用する引数を割り当てます。

吐き出されるHTMLはご想像がつくと思うので省略しますね。

属性をつけたい

このミックスインの呼び出し方だと属性はどこに書けば良いの?と疑問に思いませんか?ミックスインは暗黙的に「attributes」(属性)を引数として受け取ることができます。

例えばこのp要素にclassをつけたい場合はこのように呼び出します。


+text('Pugのテスト')(class="class-name")

この属性、複数つけることができます。例えばimg要素の場合、classも付与してalt属性も指定したいということもあると思います。そのような時はこんな感じで呼び出せばOKです。


+ミックスイン名('受け取る引数')(class="class-name")(alt="alt-txt")

ミックスイン側も指定が必要

もちろんミックスイン側にも記述をしておく必要があります。


mixin text(message)
  p(class!=attributes.class) #{message}

先ほど言ったとおりミックスインは暗黙的に「attributes」を受け取ることができます。「attributes.class」とすることで、自動的に呼び出し時の「(class=”****”)」の値を受け取ることができるのです。

ちなみにこれは他の属性も同様なので、alt属性の場合は「attributes.alt」で受け取ることができます。

こんな書き方もできたりしますよ。


// mixin
img(alt = (attributes.alt) ? attributes.alt : '')

alt属性の指定があったらその値、なければブランク(空白)という指定方法です。

配列を受け取りたい

これ躓いたところです。ミックスインの値はカンマ区切りで複数受け取ることができますが、実は配列も受け取ることが可能です。ミックスイン側の定義としてはこんな感じ。


mixin pic(src)
  picture
    if (src[2]) //src配列の第3引数が指定されていたら
      source(
        media = '(min-width: 415px) and (max-width: 768px)',
        srcset = src[2]
        )
    if (src[1]) //src配列の第2引数が指定されていたら
      source(
        media = '(max-width: 414px)',
        srcset = src[1]
        )
    img(
      src = src[0]
    )

「pic」という名前のミックスインを定義しています。内容としてはpicture要素でデバイスサイズによって画像のサイズを切り替えるという処理です。このミックスインが受け取るのは配列になります。

配列はご存知のとおり0からカウントするので、上から順番にif文で処理を実施しています。if文にしておかないと引数がない時にエラーを吐いてしまいます。

呼び出し方としてはこんな感じ。


+pic(["image01.jpg","image02.jpg","image03.jpg"])

まとめ

レスポンシブ対応にとても使えるミックスインだと思います。慣れるまで難しいですが、ミックスインを呼び出す時の属性の指定の仕方、配列の受け取り方、if文をうまく使ってミックスインを定義する方法などまだまだ奥は深いPugですが、忘れてしまいそうなので記事に残しました。

Pugはまだまだ勉強中なので、今後もPugの記事は増やしていくつもりです。