Pugで書かれたコードを見た時に動揺してしまったので、Pug入門してみた

Pugとは…

HTMLを簡単に書くためのテンプレートエンジン。 Node.jsで動いている。

メリット

  • 閉じタグがいらない→最高。
  • 共通部分を分割して再利用できる。
  • 変数が使える。
  • ループやifが使える。

慣れたらすごい楽そう。

とりあえずPugで書かれたコードが読めるのを目標にサクッと入門してみる。

インデントで階層化していく

body
    h1 タイトルです。
    p パラグラフです。

<body>
    <h1>タイトルです。</h1>
    <p>パラグラフです。</p>
<body>

見やすいかも..

classは. idは#で

body
   h1.title 簡単にclassがつけれる
　　p#description もちろんidも
   .text divは省略可能

<body>
    <h1 class="title">簡単にclassがつけれる</h1>
    <p id="description">もちろんidも</p>
    <div class="text">divは省略可能</div>
<body>

直感的!

属性は()で

body
    input(type="email")

<body>
   <input type="email">
<body>

変数も使える

body
    -const myClasses = ["class1", "class2", "class3"]
    div(class=myClasses)

<body>
   <div class="class1 class2 class3"></div>
<body>

おわり

とりあえずこれで少しは読めるようになったと思う。