반복문

scss에서 반복문도 쓸 수 있음.

 

 

.container{

  @include box(800px, royalblue);

  @include center;

  @for $i from 1 to 5{

    .item:nth-child(#{$i}){

      @include center;

      @include box(100px * $i);

     

    }

  }

}

 

@for 인덱스이름 from 1부터 to n까지

 

참고로 .item:nth-child(#{$i})

여기서 #{$i}

이거는 저렇게 뭔가 값을 계산용도가 아니라 인덱스 용도로 쓸 때는 #{변수명} 이렇게 접근 해야 함.

보간법이라고 함.

 

 

 

background-image: url('https://picsum.photos/200/300?random=' + $i);

이런 식으로도 가능함.