[備忘録]PUGをいじっててハマったところ

最近,HTMLタグを書くのが億劫になってきたのでPUGを使い始めました。

pugを使っているときにハマったところがあったのでここにまとめていきます。

環境 gulp

• CLI version: 2.3.0
• Local version: 4.0.2

PUGの変数名に"-"(ハイフン)を使ってはいけない

HTMLを生で書いていたとき,記法を一切意識せずに変数名は"_"(アンダーバー)や"-"(ハイフン)をごちゃ混ぜで使っていました。その流れでPUGも使っていたのですが..

PUG

- 
  var box-A = "hello"
  var box_B = "world"

#div-1
  p #{box-A}
  p #{box_B}

結果コンパイルエラーが出ました。

Message:
    Error parsing body of the with expression

原因は変数名に"-"(ハイフン)を使っていた事だったのですが,意外に時間をもっていかれました。
検索していても似たような状況がないため変数名にハイフンを使うのは私ぐらいしかいないのだなぁと痛感,即スネーク記法に統一しました。

imgタグとインデント

PUGはHTMLのタグの代わりにインデントを使って要素を記述をします。 これによってついつい私がやってしまうミスが以下のコードです。

PUG

- 
    var box_A= "a"
    var box_B= "b"
    var box_C= "c"


#div_1
  .div_1
    p #{box_A}
      .div_2
        p #{box_B}
          .div_3
            img(src="#")
              .div_4 
                p #{box_C}

このコードをコンパイルすると,当然エラーになります。

img is a self closing element: <img/> but contains nested content.

改行+インデントで子要素の指定が出るのですが,imgなどのように閉じタグのいらない要素にもついついやってしまうことが未だにあります。
これは単に私がPUGに慣れていないが故のミスですね。