SCSS Loop Statement

반복문(Loop)없이 배경그림 설정

HTML

    <div class="test">

      <div class="back01"></div>

      <div class="back02"></div>

      <div class="back03"></div>

      <div class="back04"></div>

      <div class="back05"></div>

      <div class="back06"></div>

      <div class="back07"></div>

    </div>

 

SCSS

.test {

  border: 1px solid red;

  height: 1000px;

  width: 800px;

  > div {

    height: 100px;

    background-repeat: no-repeat;

    &:nth-child(1){background-image: url(../images/banner/investor1.png);}

    &:nth-child(2){background-image: url(../images/banner/investor2.png);}

    &:nth-child(3){background-image: url(../images/banner/investor3.png);}

    &:nth-child(4){background-image: url(../images/banner/investor4.png);}

    &:nth-child(5){background-image: url(../images/banner/investor5.png);}

    &:nth-child(6){background-image: url(../images/banner/investor6.png);}

    &:nth-child(7){background-image: url(../images/banner/investor7.png);}  

  }

}

 

ON BROWSER

 

 

 

 

 

반복문(Loop) 적용

SCSS

.test {

  border: 1px solid red;

  height: 1000px;

  width: 800px;

  > div {

    height: 100px;

    background-repeat: no-repeat;

    // &:nth-child(1){background-image: url(../images/banner/investor1.png);}

    // &:nth-child(2){background-image: url(../images/banner/investor2.png);}

    // &:nth-child(3){background-image: url(../images/banner/investor3.png);}

    // &:nth-child(4){background-image: url(../images/banner/investor4.png);}

    // &:nth-child(5){background-image: url(../images/banner/investor5.png);}

    // &:nth-child(6){background-image: url(../images/banner/investor6.png);}

    // &:nth-child(7){background-image: url(../images/banner/investor7.png);}

    @for $i from 1 through 7 {

      &:nth-child(#{$i}) {

        background-image: url(../images/banner/investor#{$i}.png);

      }

    }

  }

}

 

 

 

ON BROWSER