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

@for

@for는 through를 사용하는 방법과 to를 사용하는 방법으로 나뉜다.

through 방식은 마지막 종료 숫자를 포함하며, to의 경우에는 마지막 종료 숫자를 포함하지 않는다.

$base-color: #036;

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}

@for $i from 1 to 3 {
  li:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}

to css

/* use through */
ul:nth-child(3n + 1) {
  background-color: #004080;
}

ul:nth-child(3n + 2) {
  background-color: #004d99;
}

ul:nth-child(3n + 3) {
  background-color: #0059b3;
}

/* use to */
li:nth-child(3n + 1) {
  background-color: #004080;
}

li:nth-child(3n + 2) {
  background-color: #004d99;
}

변수는 관례상 $i를 사용한다고 한다.

@for는 특히 :nth-child()에서 유용하게 사용되기 때문에 일반적으로는 through를 사용하는 것을 권장한다.

 

그리고 반복에 사용되는 숫자에 경우 [from 숫자 through 숫자] or [from 숫자 to 숫자] 숫자 형식만 맞추면 되기 때문에 배열을 대상으로 반복문을 돌릴 경우 length() 내장 함수를 사용할 수 있다.

 

참고: https://sass-lang.com/documentation/at-rules/control/for

Sass: @for

---

@each

@each는 List와 Map 데이터를 반복할 때 주로 사용한다.

With List

변수에는 List의 각 요소가 출력된다.

그리고 만약 반복때마다 Index값이 필요하다면 index() 내장 함수를 사용하면 된다.

$sizes: 40px, 50px, 80px;

@each $size in $sizes {
/*
 if use index
 $i: index($sizes, $size);
*/
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

to css

.icon-40px {
  font-size: 40px;
  height: 40px;
  width: 40px;
}

.icon-50px {
  font-size: 50px;
  height: 50px;
  width: 50px;
}

.icon-80px {
  font-size: 80px;
  height: 80px;
  width: 80px;
}

With Maps

key/value 쌍으로 이루어진 Map을 대상으로도 사용이 가능하다.

두 개의 요소로 Map의 값을 받을 수 있으며, 첫 번째 요소에는 key값이 두 번째 요소로는 value 값이 들어간다.

$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");

@each $name, $glyph in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
  }
}

to css

@charset "UTF-8";
.icon-eye:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "";
}

.icon-start:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "";
}

.icon-stop:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "";
}

Destructuring

이건 자바스크립트의 구조분해 할당과 비슷한데, 각 위치에 맞게 변수에 할당된다고 생각하면 된다.

물론 해당 위치에 값이 없다면 null이 할당된다.

$icons:
  "eye" "\f112" 12px,
  "start" "\f12e" 16px,
  "stop" "\f12f" 10px;

@each $name, $glyph, $size in $icons {
  .icon-#{$name}:before {
    display: inline-block;
    font-family: "Icon Font";
    content: $glyph;
    font-size: $size;
  }
}

to css

@charset "UTF-8";
.icon-eye:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "";
  font-size: 12px;
}

.icon-start:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "";
  font-size: 16px;
}

.icon-stop:before {
  display: inline-block;
  font-family: "Icon Font";
  content: "";
  font-size: 10px;
}

 

참고: https://sass-lang.com/documentation/at-rules/control/each

Sass: @each

 

---

@while

@while은 조건이 false로 평가될 때까지 내용을 반복한다.

while문 자체가 어디서 사용하던 무한루프에 빠질 수 있기 때문에, 공식문서에서는 사용을 권장하지 않는다.

$i: 6;

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

to css

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

 

참고: https://sass-lang.com/documentation/at-rules/control/while

Sass: @while

---

참고: https://heropy.blog/2018/01/31/sass/

Sass(SCSS) 완전 정복!