Loading...
pug記法例

pug記法例

  • pug
  • HTML
2020-04-17
ss_ishii
全員
作者のみ

説明

例(pug記述)

例(変換後html)

class

.hoge あいう

span.fuga かきく

<div class="hoge">あいう</div>

<span class="fuga">かきく</div>

id

#main めいん

<div id="main">めいん</div>

複数行記述

span あいう

| かきく

<span>あいうかきく</span>

文字内でタグ

p あいう#[br]かきく

<p>あいう<br>かきく</p>

任意の属性

a(href="http...")

<a href="http..."></a>

改行せずに入れ子

li: a(href="#")

<li><a href="#"></a></li>

エスケープ
(&,<,>,",' の5記号種)

p = "& < > > >"

p "& < > > >"

<p>&amp; &lt; &gt; &gt; &gt;</p>

<p>"& < > > >"</p>

変数

- var name='top'

div(class=name)

<div class="top"></div>

forループ

- for (var x = 0; x < 3; x++)

li num#{x}

<li>num0</li><li>num1</li><li>num2</li>

eachループ

each value in ["a", "b", "c"]

li #{value}

<li>a</li><li>b</li><li>c</li>

コメントアウト

// HTMLに表示

//- HTMLに非表示

<!-- HTMLに表示-->

HTMLを閉じタグなしで書けるテンプレートエンジン「pug」で使われるよくつかう記号の解説