HTMLテンプレートのPugを使えば、より効率的なコーディングができるようになります。

今回は、Pugの基本的な書き方をまとめました。

Pugの導入方法はこちらをご覧ください。

GUIコンパイラを利用して手軽にPugを始める方法。より効率的なHTMLコーディングをPugで。

例文

doctype
html(lang='ja')
  header
    title Site Title
  body
    header
      h1 : img(src='logo.png')
    main
      div.content
    footer

こんな感じでsassっぽく書いていきます。

まずは基本のタグの書き方から。

タグ

まずは基本的なタグの書き方です。

各行の先頭にタグを書きます。インデントを付けるとネスト(入れ子)されます。

ul
  li Item A 
  li Item B 
  li Item C 
<ul>
  <li>Item A</li> 
  <li>Item B</li>  
  <li>Item C</li>
</ul>

画像を入れるだけのような単純なネストの時には、次のように1行で書いてスペースを節約することができます。

a : img
<a><img/></a>

参照:Tags – Pug

属性

タグに付ける属性は括弧で表します。

a(class='button' href='google.com') Google
<a class="button" href="google.com">Google</a>

複数の属性を付けるときは、改行して見やすくすることもできます。

input(
  type='checkbox'
  name='agreement'
  checked
)
<input type="checkbox" name="agreement" checked="checked" />

classとID

classとIDはcssのようにドットやシャープで表せます。

a.button
|
|
a#main-link
<a class="button"></a>
<a id="main-link"></a>

さらに、divタグを使う場合はタグを省略してclassやIDだけで表すことができます。

.content
#content
<div class="content"></div>
<div id="content"></div>

上記を組み合わせるとこんな感じで書けます。

div#foo.bar(data-bar='baz')
<div class="bar" id="foo" data-bar="baz"></div>

参照:Attributes – Pug

今回は基本中の基本でした。これだけでも、タグの閉じ忘れをなくしたり、ネストの階層を簡単に動かせたりといったメリットは得られそうです。