基本的な書き方

Pugの基本的な書き方をご紹介します。
なお、こちらに掲載していないその他の内容については、Pug逆引きリファレンストップページをご覧ください。

タグ
入れ子
ID名／クラス名
テキスト
改行タグ
属性

入れ子

インデントを付けることでタグの入れ子を行うことができます。
インデントはスペースでもタブでも問題ありませんが、混在はできず1つのファイルで統一している必要があります。

Pug

div
	p
		span
	ul
		li
			a
				span
		li
			a
				span

コンパイル後

<div>
	<p><span></span></p>
	<ul>
		<li><a><span></span></a></li>
		<li><a><span></span></a></li>
	</ul>
</div>

また、親タグ名: 子タグ名のようにコロンと半角スペースを付けることで、改行せずに1行で入れ子にすることもできます。
コロンの前で指定したタグ名が親となるので、Emmetのように兄弟タグを連続して指定することはできませんので、ご注意ください。

Pug

div
	p: span
	ul
		li: a: span
		li: a: span

ID名／クラス名

ID名やクラス名はCSSセレクターと同様にタグ名#ID名、タグ名.クラス名と書くことができます。
なお、divタグだけはタグ名を省略することができます。

Pug

#wrap
	p.foo
	p.bar.baz
	ul#qux.quux: li

コンパイル後

<div id="wrap">
	<p class="foo"></p>
	<p class="bar baz"></p>
	<ul class="quux" id="qux">
		<li></li>
	</ul>
</div>

テキスト

タグ名テキストとタグ名とテキストの間にスペースを入れることで、テキストを書くことができます。
文字列の中にHTMLが含まれる場合は、コンパイル後はそのままHTMLとして出力されます。
文字列内のHTMLをエスケープしたい場合はタグ名="テキスト"とイコールとクォーテーションを使用することで行うことができます。
エスケープについての詳細は、文字列内のHTMLのエスケープページをご覧ください。

Pug

p あいうえお<span>かきくけこ</span>さしすせそ
p="あいうえお<span>かきくけこ</span>さしすせそ"

コンパイル後

<p>あいうえお<span>かきくけこ</span>さしすせそ</p>
<p>あいうえお&lt;span&gt;かきくけこ&lt;/span&gt;さしすせそ</p>

また、入れ子のようにインデントを行い、| テキストとパイプラインと半角スペースを先頭に付けることで複数行にすることができ、コンパイル後は改行コードを挿入することができます。

Pug

p
	| あいうえお
	| かいくけこ

コンパイル後

<p>
	あいうえお
	かいくけこ
</p>

文字列中の変数の展開

文字列の中に変数を連結（紛れ込ませる）するには、文字列連結演算子+または、#{変数名}を用います。
+は文字列をクォーテーションで使用している場合、#{変数名}は文字列だけの場合で使用します。

Pug

- var foo = "あいうえお"

	p #{foo}かきくけこ
	p=foo + "かきくけこ"

コンパイル後

<p>あいうえおかきくけこ</p>
	<p>あいうえおかきくけこ</p>

#{変数名}で変数にHTMLが含まれる場合、エスケープされます。
もしエスケープしたくない場合は、!{変数名}を使用することで、エスケープが行われなくなります。

Pug

- var foo = "あいうえお<span>かきくけこ</span>"

	p #{foo}さしすせそ
	p !{foo}さしすせそ

コンパイル後

あいうえお&lt;span&gt;かきくけこ&lt;/span&gt;さしすせそ
	あいうえお<span>かきくけこ</span>さしすせそ

改行タグ

テキストに改行タグを含ませたい場合は、インデントとパイプライン（|）でテキストを書くことで、改行タグを含ませることができます。
brタグが含まれた場合は、コンパイル後は改行コードは挿入されずbrタグを含め1行で出力されます。

Pug

p
	| あいうえお
	br
	| かいくけこ

コンパイル後

<p>
	あいうえお<br>
	かいくけこ
</p>

また、#[br]のようにすることで、テキスト内でタグを展開することもできます。

Pug

p あいうえお#[br]かいくけこ

コンパイル後

<p>あいうえお<br>かいくけこ</p>

属性

タグ名(属性="属性値")と書くことで属性を付与することができます。
複数指定する場合は、タグ名(属性="属性値" 属性="属性値")のようにスペースで区切ることで複数の属性を付与することができます。

Pug

img(src="img/sample.jpg" width="640" height="480" alt="")

コンパイル後

<img src="img/sample.jpg" width="640" height="480" alt="">

また複数の属性はスペースではなく改行することで複数行にまたがって指定することもできます。

Pug

img(
	src="img/sample.jpg"
	width="640"
	height="480"
	alt=""
)

なお、属性値を指定しない場合は属性名のみが付与されます。

Pug

details(open)
	summary 開閉
	ul: - for (var i = 0; i < 3; i++)
		li=i

コンパイル後

<details open>
	<summary>開閉</summary>
	<ul>
		<li>0</li>
		<li>1</li>
		<li>2</li>
	</ul>
</details>

Pug逆引きリファレンス一覧へ戻る