jadeがpugになって変わった所のメモ

HTMLのコーディングの際にjadeを愛用しています。
jadeがpugになってから、所々仕様が変わっていたのでメモ

Mixinの呼び出し方が変わった

mixin 関数名() ではなく+関数名()になった。

jade

mixin foo('引数')

↓
pug

+foo('引数')

文字列中の変数展開の方法が変わった

jadeの時は"で囲まれた文字列の中に#{変数名}で文字列展開ができていましたが、
pugからは文字列展開をする場合は`で文字列を囲み${変数名}とするか、jadeでも使えていた+演算子で文字列と変数を連結するかになってました。
これはちょっとjadeのときの方が便利だった感じがします...

jade

a(href="#{link}")
p(class="foo#{bar}hoge")
p(class="foo" + bar + "hoge")

↓
pug

a(href=`${link}`)
p(class=`foo${bar}hoge`)
p(class="foo" + bar + "hoge")

for, each の先頭の-が不要になった

逆に-を付けて - each とか - for としてしまうとpugではシンタックスエラーになってしまうようです。

jade

- each val in obj
  = val

- for val in arr
 = val

↓
pug

each val in obj
  = val

for val in arr
 = val

詳しくは公式のリファレンスに載っています。
Migrating to Pug 2

　
CODEPENにjadeで書いてたものがpugに置き換わってて死んでたので気づきました。
これからはpugを使っていく事になると思うので気をつけようと思いました。

---

DUSTSTROKE 45 ｘ 45 cm パグ 柄 クッション カバー おしゃれ インテリア 雑貨 (パグ)