YIR Framework

조건문과 반복문 (Control Directives)

SCSS(Sass)에서 조건문과 반복문은 복잡한 스타일링 요구사항을 처리하고 코드를 간소화하는 데 사용됩니다. 이러한 제어 지시문을 사용하면, 동일한 패턴을 가진 스타일을 반복적으로 생성하거나, 특정 조건에 따라 다른 스타일을 적용할 수 있습니다.

조건문 (@if, @else if, @else)

조건문은 주어진 조건에 따라 다른 스타일 또는 설정을 적용할 때 사용됩니다.

  • @if는 주어진 조건이 참(True)일 때 코드 블록을 실행합니다.
  • @else if는 첫 번째 조건이 거짓(False)이고 추가 조건이 참일 때 코드 블록을 실행합니다.
  • @else는 모든 조건이 거짓일 때 코드 블록을 실행합니다.
$theme: "dark";

.container {
  @if $theme == "dark" {
    background-color: black;
    color: white;
  } @else {
    background-color: white;
    color: black;
  }
}

반복문 (@for, @each, @while)

반복문은 주어진 조건이나 목록에 따라 코드 블록을 반복 실행할 때 사용됩니다.

  • @for는 정해진 범위에 대해 반복합니다.
  • @each는 리스트나 맵의 각 항목에 대해 반복합니다.
  • @while은 조건이 참인 동안 반복합니다.

@for 반복문 예시:

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

이 SCSS 코드 조각은 @for 반복문을 사용하여 클래스 .item-1, .item-2, .item-3에 대해 서로 다른 width 스타일을 생성합니다. 각각의 클래스는 $i의 값에 따라 고유한 너비를 가집니다.

코드 분석

  1. @for $i from 1 through 3: 이 줄은 $i라는 변수를 1부터 3까지 반복하도록 설정합니다. $i는 각 반복마다 1, 2, 3의 값을 차례로 가집니다.

  2. .item-#{$i}: 이 부분은 문자열 보간(string interpolation)을 사용하여 $i의 현재 값에 따라 동적으로 클래스 이름을 생성합니다. 예를 들어, 첫 번째 반복에서는 .item-1, 두 번째는 .item-2, 세 번째는 .item-3이 됩니다.

  3. { width: 100px * $i; }: 각 클래스에 대해 width 속성을 설정합니다. width는 $i의 값에 100픽셀을 곱하여 계산됩니다. 그래서 .item-1은 width: 100px, .item-2는 width: 200px, .item-3은 width: 300px를 갖게 됩니다.

컴파일 후 CSS

SCSS 코드가 컴파일되면 아래와 같은 CSS가 생성됩니다:

.item-1 {
  width: 100px;
}

.item-2 {
  width: 200px;
}

.item-3 {
  width: 300px;
}

이 반복문은 동일한 패턴을 가진 여러 스타일을 효율적으로 생성하는 좋은 예시입니다. SCSS의 @for 반복문을 사용하면, 비슷한 패턴을 가진 여러 CSS 규칙을 손쉽게 작성할 수 있습니다.

@each 반복문 예시:

$colors: (blue: #3498db, red: #e74c3c, green: #2ecc71);

@each $color, $hex in $colors {
  .#{$color}-text { color: $hex; }
}

이 SCSS 코드 조각은 Sass의 @each 반복문을 사용하여 $colors 맵에 있는 각 색상 이름과 해당하는 헥스 코드를 이용해 동적으로 CSS 클래스를 생성합니다.

코드 설명

  1. $colors: 여기서 $colors는 Sass의 맵(map)으로 정의됩니다. 맵은 키-값 쌍으로 구성되어 있으며, 각 색상의 이름(blue, red, green)이 키로, 해당 색상의 헥스 코드(#3498db, #e74c3c, #2ecc71)가 값으로 지정됩니다.

  2. @each $color, $hex in $colors: 이 @each 반복문은 $colors 맵의 각 항목을 반복합니다. 반복할 때마다 $color 변수는 색상 이름(키)을, $hex 변수는 해당 색상의 헥스 코드(값)를 받습니다.

  3. .#{$color}-text { color: $hex; }: 이 부분에서 문자열 보간(string interpolation)을 사용해 클래스 이름을 동적으로 생성합니다. 예를 들어, $color가 blue일 때 클래스 이름은 .blue-text가 되며, 해당 클래스의 color 속성은 $hex 변수의 값인 #3498db로 설정됩니다.

컴파일 후 CSS

SCSS 코드가 컴파일된 후에는 다음과 같은 CSS가 생성됩니다:

.blue-text {
  color: #3498db;
}

.red-text {
  color: #e74c3c;
}

.green-text {
  color: #2ecc71;
}

각 클래스는 해당 색상의 이름과 헥스 코드를 반영하여, 색상별로 텍스트 색상을 설정하는 데 사용될 수 있습니다. 이러한 방식은 다양한 색상을 쉽게 관리하고 재사용할 수 있도록 해줍니다.

@while 반복문 예시:

$i: 1;

@while $i <= 3 {
  .item-#{$i} { width: 100px * $i; }
  $i: $i + 1;
}

이러한 제어 지시문을 사용하면, SCSS 코드를 보다 동적이고 유연하게 만들 수 있으며, 중복을 크게 줄일 수 있습니다. 조건에 따라 스타일을 변경하거나, 여러 요소에 대해 비슷한 스타일을 반복적으로 적용할 때 매우 유용합니다.

이 SCSS 코드 조각은 @while 반복문을 사용하여 클래스 .item-1, .item-2, .item-3에 대해 서로 다른 width 스타일을 생성합니다. 각 클래스는 변수 $i의 값에 따라 고유한 너비를 가집니다.

코드 설명

  1. 변수 초기화: $i: 1;로 시작하여, $i 변수를 1로 초기화합니다.

  2. @while 반복문: @while $i <= 3은 $i가 3 이하일 때까지 반복문을 실행하라는 의미입니다.

  3. 클래스 생성과 스타일 지정:

    • .item-#{$i}: 문자열 보간을 사용하여 $i의 현재 값에 따라 동적으로 클래스 이름을 생성합니다. 예를 들어, 첫 번째 반복에서는 .item-1, 두 번째는 .item-2, 세 번째는 .item-3이 됩니다.
    • { width: 100px * $i; }: 각 클래스에 대해 width 속성을 설정합니다. width는 $i의 값에 100픽셀을 곱하여 계산됩니다. 그래서 .item-1은 width: 100px, .item-2는 width: 200px, .item-3은 width: 300px를 갖게 됩니다.

  4. 변수 증가: $i: $i + 1;는 $i의 값을 1씩 증가시킵니다. 이는 다음 반복을 위해 $i의 값을 업데이트합니다.

컴파일 후 CSS

SCSS 코드가 컴파일되면 아래와 같은 CSS가 생성됩니다:

.item-1 {
  width: 100px;
}

.item-2 {
  width: 200px;
}

.item-3 {
  width: 300px;
}

@while 반복문은 특정 조건이 만족될 때까지 계속 실행되는 반복문으로, 복잡한 조건에 따라 스타일을 생성할 때 유용합니다. 이 예시에서는 간단한 조건을 사용하여 동적으로 여러 클래스에 서로 다른 스타일을 적용하고 있습니다.

Last Updated:
Contributors: RiGang