Sass 반복문

@while

$i: 1;
$gutter: 20px;

@while $i <= 6 {
   .grid-#{$i} {
      width: (60px * $i) + $gutter * ($i - 1);
   }
   $i: $i+1;
}

 

컴파일하면 아래와 같습니다.

컴파일 중 무한 루프에 빠질 수 있어서 사용을 권장하지 않습니다.

 

.grid-1 {
  width: 60px;
}

.grid-2 {
  width: 140px;
}

.grid-3 {
  width: 220px;
}

.grid-4 {
  width: 300px;
}

.grid-5 {
  width: 380px;
}

.grid-6 {
  width: 460px;
}

@for

$total:6;

@for $i from 1 through $total{
   .grid-#{$i} {
      width: 70px * $i;
   }
}

@for $i from 1 to $total{
   .grid-#{$i} {
      width: 70px * $i;
   }
}

 

through는 6(끝)까지, to는 5(끝의 전)까지 나타냅니다.

@each

$fruits: (apple, orange, banana, mango);

.fruits {
  @each $fruit in $fruits {
    li.#{$fruit} {
      background: url("/images/#{$fruit}.png");
    }
  }
}

 

컴파일하면 아래와 같습니다.

 

.fruits li.apple {
  background: url("/images/apple.png");
}
.fruits li.orange {
  background: url("/images/orange.png");
}
.fruits li.banana {
  background: url("/images/banana.png");
}
.fruits li.mango {
  background: url("/images/mango.png");
}

 

https://www.sassmeister.com/

SassMeister | The Sass Playground!

위 사이트에서 실시간으로 컴파일을 확인할 수 있습니다.