[SCSS] SCSS 조건문과 반복문

SCSS는 CSS를 확장한 언어로서, 조건문과 반복문을 사용하여 스타일 코드를 더욱 유연하게 작성할 수 있습니다. 이를 통해 특정 조건에 따라 스타일을 다르게 적용하거나, 스타일을 여러 번 반복하여 생성할 수 있습니다. 이 글에서는 SCSS의 조건문과 반복문에 대해 알아보겠습니다.

---

조건문

SCSS에서 조건문은 @if, @else if, @else를 사용하여 특정 조건에 따라 스타일을 다르게 적용할 수 있습니다.

@mixin button-style($type) {
  @if $type == "primary" {
    background-color: #007bff;
    color: #fff;
  } @else if $type == "secondary" {
    background-color: #6c757d;
    color: #fff;
  } @else {
    background-color: #f1f1f1;
    color: #333;
  }
}

.button {
  @include button-style("primary");
}

.another-button {
  @include button-style("secondary");
}

.third-button {
  @include button-style("default");
}

위의 예제에서 @if와 @else if, @else를 사용하여 $type에 따라 버튼의 스타일을 다르게 정의하였습니다.

---

반복문

SCSS에서 반복문은 @for, @each, @while을 사용하여 스타일 속성을 여러 번 반복하여 생성할 수 있습니다.

@for $i from 1 through 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
}

@each $color in #007bff, #6c757d, #28a745 {
  .color-box-#{$color} {
    background-color: $color;
  }
}

$i: 1;
@while $i <= 5 {
  .count-#{$i} {
    counter-increment: item-counter;
  }
  $i: $i + 1;
}

위의 예제에서 @for를 사용하여 1부터 3까지 반복하여 .item-1, .item-2, .item-3의 스타일을 정의하였고, @each를 사용하여 리스트의 값들에 따라 각각의 .color-box-#{$color}의 스타일을 생성하였습니다. 또한, @while을 사용하여 카운터를 이용하여 1부터 5까지 반복하여 .count-1, .count-2, ..., .count-5의 스타일을 생성하였습니다.

조건문과 반복문을 활용하면 스타일 속성을 더욱 동적으로 조작할 수 있습니다. 이를 통해 더욱 효율적인 스타일 코드를 작성할 수 있습니다. 다음 글에서는 SCSS의 다른 기능들을 더 자세히 살펴보겠습니다.