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として認識されるのかもです。
[参考]
- Mixins – Pug
- Use pug mixin result as attribute value - Stack Overflow
- PugのIncludeやMixinなど - Qiita
- Pug(Jade)のinclude(インクルード)とextends(継承)、mixin(ミックスイン)の使用方法 - Pug入門 | ねこしすてむ
- 出版社/メーカー: HEMING'S
- メディア:
- この商品を含むブログを見る