Pugの記法まとめ

## HTMLをPugで書くメリット
- 閉じタグを書かなくて良いので、書き忘れることが無くなる
- Classを「.」、IDを「#」と書くので、Class名やID名変更時の置換が楽になる
- ヘッダー、フッターなど共通部分を別ファイルで管理できる
- 変数や条件分岐ができる

## HTMLをPugで書くデメリット
- 変換する環境が必要

変換は、npm-scriptsやGulpを使いましょう。[npm-scriptsの記事](https://qiita.com/takeshisakuma/items/dbbb1c465099e6e4dd2e)書きました。
GUIでの変換が良い方は、[Prepros](https://prepros.io/)がオススメです。

## Pug←→HTML変換サービス
環境を作らずにPugの書き方を練習できます。

### HTMLをPugに変換
html2pug - convert your html code to pug
https://html2pug.now.sh/

### PugをHTMLに変換
PugHtml - Pug and HTML online converter in realtime
https://pughtml.com/

## タグ
- タグ名はHTMLタグになる タグ要素名はそのまま記述
- 要素ごとに改行する
- タグの中のテキストは半角スペース1つ空けて、続けて書く

### タグの中で特殊なもの

#### div
divタグは省略可能

```:pug
 .test ああああ
```
↓変換

```:html
<div class="test">ああああ</div>
```

#### br

```:pug
p ああああ
  br
  | ああああ
```

↓変換

```:html
<p>ああああ<br>ああああ</p>
```




### doctype宣言

```:pug
doctype html
```

↓変換

```:html
<!DOCTYPE html>
```




## 入れ子(子要素)
### 改行せずに入れ子
「:」 ＋ 半角スペース

```:pug
li: a(href="#") あああ
```

↓変換

```:html
<li><a href="#">あああ</a></li>
```

### 改行して入れ子
改行をしてインデントをつければ入れ子になる
インデントとタブが混在すると変換時にエラーになるので、[EditorConfig](https://qiita.com/takeshisakuma/items/c22b59a5e394b4ce6cee)などで整形すると良いです。


```:pug
 div ああああ
 div ああああ
 
 div ああああ
  div ああああ
```

↓変換

```:html
<div>ああああ</div>
<div>ああああ</div>
 
<div>ああああ
  <div>ああああ</div>
</div>
```

## IDとClass
Classは「.」、IDは「#」で表します。
classやidは要素に続けて記述します。

```:pug
section#main
.content.picture
```

↓変換

```:html
<section id="main"></section>
<div class="content picture"></div>
```

## 属性
属性は丸括弧内に記述する
属性と値は要素に続けて（attr=”value”）という形で記述
IDとClassも属性なので、同じように書くことができます。

```:pug
link(rel="stylesheet" link="css/style.css")
script(src="js/main.js")
a(href="#") Top
input(
  type="radio"
  name="test"
  checked
)
```

↓変換

```:html
<link rel="stylesheet" link="css/style.css"/>
<script src="js/main.js"></script>
<a href="#">Top</a>
<input type="radio" name="test" checked="checked"/>
```




## エスケープ
イコール（=）を使って5種類の記号「&」 「<」「 >」「"」「'」をエスケープできます。
パイプライン（|）が入るとエスケープは解除されます。

```:pug
p= "& < > > >"
p "& < > > >"
```

↓変換

```:html
<p>&amp; &lt; &gt; &gt; &gt;</p>
<p>"& < > > >"</p>
```

## 外部ファイルの読み込み
includeで共通化したファイルを挿入できます。
相対パスで指定します。(ルートパスでは指定できません)

```:pug
include directory/header.pug
```


## HTMLをそのままPugファイル内で使う
HTMLはドット（.）で終わる要素の中に入れておけばそのまま出せます。

```:pug
.
  <iframe width="560" height="315" src="https://www.youtube.com/embed/9xLvF6xoG30" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
```
HTML以外、例えばphpも書くことができます。(拡張子はphpにする必要があります)


## 変数
head内のmeta情報など、ページごとに違う内容の場合は、変数を使う事ができます。
定義はページの一番上に書きます。

```:pug
- var pagename='ページ名'
   
title #{pagename}
```

↓

```:html
 <title>ページ名</title>
```

#### プロパティで変数を使う
「- var 変数名 = 変数の中身」で定義

```:pug
- var classname='aaa'

div(class=classname)
div(class=`${classname}`)
```

↓変換

```:html
<div class="aaa"></div>
<div class="aaa"></div>
```





## ループ
### for

````:pug
- for (var x = 0; x < 5; x++)
  li number#{x}
```

↓変換

```:html
<li>number0</li>
<li>number1</li>
<li>number2</li>
<li>number3</li>
<li>number4</li>
```

### each

```:pug
each value in ["yamada", "suzuki", "sato", "ito", "tanaka"]
  li #{value}
```

↓変換

```:html
<li>yamada</li>
<li>suzuki</li>
<li>sato</li>
<li>ito</li>
<li>tanaka</li>
```


## 条件分岐
### if

```:pug
 - var name = '山田'
 
 if name=='鈴木'
   p 私は鈴木です
 else if name=='佐藤'
   p 私は佐藤です
 else
   p 私は鈴木でも佐藤でもありません
```

↓変換

```:html
 <p>私は鈴木でも佐藤でもありません</p>
```

### switch

```:pug
- var name = '山田'

case name
  when '鈴木'
    p 私は鈴木です
    break
  when '佐藤'
    p 私は佐藤です
    break
  default
    p 私は鈴木でも佐藤でもありません
```

↓変換

```:html
<p>私は鈴木でも佐藤でもありません</p>
``` 





## コメントアウト
コメントにはHTMLとして出力されるものと、されないものがある

```:pug
// HTMLに出す
//- HTMLに出さない
```

↓変換

```:html
<!-- HTMLに出す-->
```