Pug(Jade)の基本記法について

Pug(jade)は独特の記法なので、最初ちょっと覚えるの大変ですよね。
これだけ覚えれば、普通のHTML書くのに困らない、
基本のコードをpickupしてまとめました。

はじめの一歩

• <>不要、閉じタグ不要
• タグの後ろにスペースをいれてタグ内テキスト

▼Pug(Jade)

p ほげほげ

▽HTML

<P>ほげほげ</P>

ネスト（入れ子）

• 改行＋インデントで要素の入れ子を作る

▼Pug(Jade)

ul
  li アイテム
  li アイテム

▽HTML

<ul>
  <li>アイテム</li>
  <li>アイテム</li>
</ul>

　

タグ内でテキストを改行する

• 「 | 」を使う

▼Pug(Jade)

p 吾輩は猫である。
  br
  | 名前はまだない。
  br
  | どこで生れたかとんと見当けんとうがつかぬ。

▽HTML

<p>吾輩は猫である。<br>
  名前はまだない。<br>
  どこで生れたかとんと見当けんとうがつかぬ。
</p>

idやclassをつける

• id=""不要、class=""不要
• タグのすぐ後ろに、「#id名」、「.class名」でつける
• divは省略できる

▼Pug(Jade)

#box
  h1.title タイトル
  p.lead ほげほげ

▽HTML

<div id="box">
  <h1 class="title">タイトル</h1>
  <p class="lead">ほげほげ</p>
</div>

属性の書き方

• タグの後ろ（）をつけて、内に書きます。

▼Pug(Jade)

a(href="https://google.com" target="blank") ほげリンク
img(src="./sample.img")

▽HTML

<a href="https://google.com" target="blank">ほげリンク</a>
<img src="./sample.img">

ネスト（入れ子）する時、改行とインデントを省略する

• タグの後ろにスペースを入れて「：」を入れるとネストできる
• navを作る時に便利
• ２つ以上も使用可能(ただし、テキストの後には「：」は使えないので注意)

▼Pug(Jade)

ul
  li: a(href="#")
  li: a(href="#"): span ほげ
  li: a(href="#"): img(src="")

▽HTML

<ul>
  <li><a href="#"></a></li>
  <li><a href="#"><span>ほげ</span></a></li>
  <li><a href="#"><img src=""></a></li>
</ul>

コメント

• ２種類あり
• コンパイルした後、HTMLに残すもの
• コンパイルした後、HTMLに残さないもの（Pugでのみ表示）

▼Pug(Jade)

// コンパイルした後、HTMLに残すもの
//- コンパイルした後、HTMLに残さないもの（Pugでのみ表示）

▽HTML

<!-- コンパイルした後、HTMLに残すもの-->

ジェネレータを使う

やっぱり慣れなくてストレス溜まるー！って方はまずはこちらで感覚をつかむのをオススメします。

HTML -> Pug(Jade)を自動変換サイト

HTML to Jade converter
http://html2jade.aaron-powell.com/

Pug(Jade) -> HTML 自動変換サイト

Online Jade Template Editor
http://aramboyajyan.github.io/online-jade-template-editor/