[Sass/SCSS] 반복문(for,each, while)

for (함수)

• @for는 스타일을 반복적으로 출력합니다.
• @for는 through를 사용하는 형식과 to를 사용하는 형식으로 나뉩니다.

// through
// 종료 만큼 반복
@for $변수 from 시작 through 종료 {
  // 반복 내용
}

// to
// 종료 직전까지 반복
@for $변수 from 시작 to 종료 {
  // 반복 내용
}

• SCSS:

// 1부터 3번 반복
@for $i from 1 through 3 {
  .through:nth-child(#{$i}) {
    width : 20px * $i
  }
}

// 1부터 3 직전까지만 반복(2번 반복)
@for $i from 1 to 3 {
  .to:nth-child(#{$i}) {
    width : 20px * $i
  }
}

• Compiled to:

.through:nth-child(1) { width: 20px; }
.through:nth-child(2) { width: 40px; }
.through:nth-child(3) { width: 60px; }

.to:nth-child(1) { width: 20px; }
.to:nth-child(2) { width: 40px; }

• to는 주어진 값 직전까지만 반복해야할 경우 유용할 수 있습니다.
• 그러나 :nth-child()에서 특히 유용하게 사용되는 @for는 일반적으로 through를 사용하길 권장합니다.

@each

• @each는 List와 Map 데이터를 반복할 때 사용합니다.

@each $변수 in 데이터 {
 // 반복 내용
}

• SCSS:

// List Data
$fruits: (apple, orange, banana, mango);

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

• Compiled to:

.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");
}

• 조건에는 논리 연산자 and, or, not을 사용할 수 있습니다.

• SCSS:

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

.fruits {
 @each $fruit in $fruits {
   $i: index($fruits, $fruit);
   li:nth-child(#{$i}) {
     left: 50px * $i;
   }
 }
}

• Compiled to:

.fruits li:nth-child(1) {
  left: 50px;
}

.fruits li:nth-child(2) {
  left: 100px;
}

.fruits li:nth-child(3) {
  left: 150px;
}

.fruits li:nth-child(4) {
  left: 200px;
}

• 동시에 여러 개의 List 데이터를 반복 처리할 수도 있습니다.

• 단, 각 데이터의 Length가 같아야 합니다.

• SCSS:

$apple: (apple, korea);
$orange: (orange, china);
$banana: (banana, japan);

@each $fruit, $country in $apple, $orange, $banana {
  .box-#{$fruit} {
    background: url("/images/#{$country}.png");
  }
}

• Compiled to:

.box-apple {
  background: url("/images/korea.png");
}

.box-orange {
  background: url("/images/china.png");
}

.box-banana {
  background: url("/images/japan.png");
}

• Map 데이터를 반복할 경우 하나의 데이터에 두 개의 변수가 필요합니다.

@each $key변수, $value변수 in 데이터 {
  // 반복 내용
}

• SCSS:

$fruits-data: (
  apple: korea,
  orange: china,
  banana: japan
);

@each $fruit, $country in $fruits-data {
  .box-#{$fruit} {
    background: url("/images/#{$country}.png");
  }
}

• Compiled to:

.box-apple {
  background: url("/images/korea.png");
}

.box-orange {
  background: url("/images/china.png");
}

.box-banana {
  background: url("/images/japan.png");
}

@while

• @while은 조건이 false로 평가될 때까지 내용을 반복합니다.
• 잘못된 조건으로 인해 컴파일 중 무한 루프에 빠질 수 있습니다.
• 사용을 권장하지 않습니다.

@while 조건 {
  // 반복 내용
}

• SCSS:

$i: 6;

@while $i > 0 {
  .item-#{$i} {
    width: 2px * $i;
  }
  $i: $i - 2;
}

• Compiled to:

.item-6 { width: 12px; }
.item-4 { width: 8px; }
.item-2 { width: 4px; }