コーディングにも便利なPugの変数についてまとめといたよ

3436 ワード
HTML pug Jade コーディング HTML テキストリンク

概要

プロジェクトで使うレベルでなくても、HTMLのコーディングに変数使いたい時ってあるよね？

Codepenとか使えばすぐに書き出せるので、僕はいつも使ってます。

内容はだいたいこのへん
https://pugjs.org/language/iteration.html

さっそく書くね

これが

index.pug
.container

  h1 Variable
  -var variable = "a variable"
    p This is #{variable}.

  h1 Array
  -var array = ["This","is","a","array"]
    p #{array[0]}
      strong #{array[1]}
      small #{array[2]}
      mark #{array[3]}
    h2 -each
    ul
      each val in array
        li #{val}

  h1 Object
  -var object = {subject:"This", verb:"is", complement:"a object"}
  ul
    each val, index in object
      li #{index} : #{val}

こうなるよ

index.html
<div class="container">
  <h1>Variable</h1>
  <p>This is a variable.</p>
  <h1>Array</h1>
  <p>This<strong>is</strong><small>a</small>
    <mark>array</mark>
  </p>
  <h2>-each</h2>
  <ul>
    <li>This</li>
    <li>is</li>
    <li>a</li>
    <li>array</li>
  </ul>
  <h1>Object</h1>
  <ul>
    <li>subject : This</li>
    <li>verb : is</li>
    <li>complement : a object</li>
  </ul>
</div>

コーディングを楽したい時に便利ーーすごーーーい

動いてるやつこれ
https://codepen.io/ksyunnnn/pen/gobNZP