Sass(SCSS) At-Rules #5[@for and @while]

@for

  // 구문
  @for <변수> from <표현식> to <표현식> {...}
  @for <변수> from <표현식> through <표현식> {...}

어떤 숫자에 대해 위아래도 카운트 하면서 각 숫자에 대한 블록을 평가합니다. 위 for 구문 중 to를 사용하면 최종 숫자는 제외되고 through를 사용하면 포함됩니다.

• SCSS

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

• CSS

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

---

@while

  // 구문
  @while <표현식> {...}

@while 문은 표현식이 참(true)일 경우 블록을 평가합니다. 표현식이 거짓(false)이 될 때까지 반복하여 평가함

• SCSS

  /// Divides `$value` by `$ratio` until it's below `$base`.
  @function scale-below($value, $base, $ratio: 1.618) {
    @while $value > $base {
      $value: $value / $ratio;
    }
    @return $value;
  }
  
  $normal-font-size: 16px;
  sup {
    font-size: scale-below(20px, 16px);
  }

• CSS

  sup {
    font-size: 12.36094px;
  }