코딩에도 편리한 Pug의 변수를 정리했습니다.

개요

프로젝트에서 사용하는 레벨이 아니어도 HTML 코딩에 변수를 사용하고 싶을 때가 있죠?

Codepen 라든지 사용하면 곧바로 내보낼 수 있으므로, 나는 항상 사용하고 있습니다.

내용은 대체로 이 편

즉시 쓰겠습니다.

이것이

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>

코딩을 즐기고 싶을 때 편리 - 대단한

움직이는 사람
htps : // 코데펜. 이오 / k-Sun / Pen / Go Bn ZP

Reference

이 문제에 관하여(코딩에도 편리한 Pug의 변수를 정리했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ksyunnnn/items/98efc1283211f37c2bf3

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다