2019.07.31 / 学習

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が変な入れ子が出来上がってないかチェックした方がいいです!

また②書くと思いますー。