같은 클래스와 태그 반복문 적용하기(pug)

pug에서 반복문을 활용하면 코드양을 줄일 수 있다  

만약 a태그에서 여러개의 다른 img를 넣을때 3줄의 코드로 간단히 정리 가능하다 

<div class="icon__box">
    a(href='#').banner__icon
      +img('images/icons/fb_icon.png')
    a(href='#').banner__icon
      +img('images/icons/in_icon.png')
    a(href='#').banner__icon
      +img('images/icons/be_icon.png')
    a(href='#').banner__icon
      +img('images/icons/tw_icon.png')
    a(href='#').banner__icon
      +img('images/icons/ball_icon.png')
 </div>

아이콘의 이름은 전부 00_icon.png로 통일되어 있으며, 저장 경로 또한 동일하다. 

위와 같은 코드를 반복문을 적용하면 

 

<div class="icon__box">
    each img_name in ['fb','in','be','tw','ball']
      a(href='#').banner__icon
        +img('images/icons/'+ img_name +'_icon.png')
  </div>

3줄로 코드를 줄일 수 있다. 

 

검색을 통해 확인한 다른 반복문의 경우도 나중을 위해 아래에 작성해둔다 

 

첫번째 예시

ul
 each n in [1,2,3,4]
  li = n
 
/////// 결과

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
</ul>

 

두번째 예시

ul
 each n,index in ['zero', 'one','two]
  li = index + ':' + n
 
/////// 결과

<ul>
 <li>0 : zero</li>
 <li>1 : one</li>
 <li>2 : two</li>
</ul>