Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

概要

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

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

内容はだいたいこのへん:dog:
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>

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

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

ksyunnnn
ハイパー新人プログラマ
https://medium.com/@ksyunnnn
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away