2020.07.14 /

[テスト投稿] Pug 文法

Pug(パグ)は、HTMLを効率的に書くためのテンプレートエンジンです。

メリット

新規構築に向いてます。 閉じタグ不要なので閉じミスなくなります。 includeが使える if・forなどなど書けます! phpみたいに使えます。

デメリット

運用は不向きだと思う。 include元を編集した時全ファイル保存しなおす必要がある。(動的にコンパイルされる方法がわからないだけかもしれない) 書き方が独特なルールあります。 覚えたら、htmlが凄くめんどくさくなります!

繰り返し処理

each

↓ このように出力されます

繰り返し処理

for

↓ このように出力されます

条件分岐

if

↓ このように出力されます

オススメサイト

html→Pug変換 https://www.html2jade.org 基本的な記述方法はここを見るといいです。 https://qiita.com/cotolier_risa/items/135d168eddd6ae6c3409

参考サイト

https://qiita.com/yuusuke510/items/844e97ce70b9ce64aaff https://hacknote.jp/archives/29090/ http://cly7796.net/wp/css/try-using-conditional-branching-and-looping-with-pug/

注意点

注意: 変数名に-入れるとエラー 例) 〇 var sample = ‘あいうえお’; ×  var sample-aaa = ‘あいうえお’; Pugで作業効率アップです! 慣れるまでは、出力されたhtmlが変な入れ子が出来上がってないかチェックした方がいいです! また②書くと思いますー。