かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Pug 変数を返すMixinをつくりたい。


HTMLプリコンパイラのpugを使っていて、引数から計算をして値を返すMixinを作ろうとした所

mixin getCalendarRow(dayNum, start)
  return Math.ceil( (dayNum + start - 1) / 7 );

// 呼び出し側
div(class="row"+ +getMonthRow(30, 6))

👇 次のようなエラーになってしまいました。

Plumber found unhandled error:
 TypeError in plugin 'gulp-pug'
 getCalendarRow is not a function

どうやら、pugのmixinはHTMLとかblockを出力するものでないと、mixinを呼び出した際にエラーになってしまうっぽいです...

function にしてしまえば、変数を返すmixinが作れる!

mixinキーワードでなく-の後に改行とインデントをしてfunctionとして作成すると変数を返すmixinが作成することができるみたいです!!

-
  function getCalendarRow(dayNum, start) {
    return Math.ceil( (dayNum + start - 1) / 7 );
  }

// 呼び出し側 呼び出しは通常の mixin と同じ
div(class="row"+ +getMonthRow(30, 6))

👇 出力

<div class="row5"></div>

(๑˃̵ᴗ˂̵)و ハッピー!

関数を作成する時に - を書いて改行&インデントをするのがポイントです。
- の後にインデントした範囲は普通のjavascriptとして認識されるのかもです。


[参考]