Pug（パグ）というのは、htmlを効率的に書くためのテンプレートエンジンです。

拡張子は「.pug」となります。

例えば以下の様なhtmlがあった場合、

<div class="c-box--hoge">
  <div><img src="hoge.jpg" width="100" alt="">
  <p>ほげ～</p>
</div>

Pugなら以下のようになります。

.c-box--hoge
  div: img(src="hoge.jpg", width="100", alt="")
  p ほげ～

classやidがあればdivは省略可能です。

ちなみに↑のhtmlのほう、imgタグを囲ったdivの閉じタグを忘れています。

こういうのになかなか気づかないもんですが、Pugなら閉じタグは必要ありません。

また、コーディングが終わった後に、最初のdivは横幅100%にして、画像とテキストをflexでいい感じにしたいっていうときがあります。

htmlの場合divで囲ってまた閉じて･･･とかします。今度はclassの閉じ(“)を忘れてるぞ！ポンコツか！

<div class="c-box--hoge">
  <div class="u-flex>
    <div><img src="hoge.jpg" width="100" alt=""></div>
    <p>ほげ～</p>
  </div>
</div>

Pugの場合テキストと画像のインデントを下げてその上に新しく箱(div)を足すだけです。classも閉じるとかそういうの要りません。

.c-box--hoge
  .u-flex
    div: img(src="hoge.jpg", width="100", alt="")
    p ほげ～

あとはgulpなりpreprosなりでコンパイルすればおっけーです。

他にも変数の使用や条件分岐、ヘッダー用pugを作ってインクルードさせることも可能なので便利です。