@if, @else 조건문 이해하기

조건문이란?

조건문은 "만약 ~라면"이라는 조건에 따라 다른 코드를 실행하는 기능입니다.
SCSS에서 조건문을 사용하면 상황에 따라 다른 스타일을 적용할 수 있고, 테마나 상태에 따라 스타일을 분기하는 등 유연한 디자인 구현이 가능해집니다.

조건문의 기본 개념

일상 생활에서도 조건문을 사용합니다:

"만약 비가 오면 우산을 가져가고, 그렇지 않으면 가져가지 않는다"
"만약 점수가 90점 이상이면 A, 80점 이상이면 B, 그렇지 않으면 C"

SCSS 조건문도 같은 원리입니다. 조건을 확인하고 그에 맞는 스타일을 적용합니다.

								// 만약 $theme가 'dark'라면 어두운 배경 사용
								$theme: 'dark';

								@if $theme == 'dark' {
								  body {
								    background: #000000;
								    color: #ffffff;
								  }
								}

조건문이 필요한 이유

조건문을 사용하면 하나의 믹스인이나 함수로 여러 상황을 처리할 수 있습니다.

								// 조건문 없이 여러 믹스인을 만들어야 함
								@mixin button-primary {
								  background: #0a58ca;
								  color: #ffffff;
								}

								@mixin button-secondary {
								  background: #6c757d;
								  color: #ffffff;
								}

								@mixin button-success {
								  background: #28a745;
								  color: #ffffff;
								}

								// 각각 따로 사용해야 함
								.button-primary {
								  @include button-primary;
								}

								// 조건문으로 하나의 믹스인으로 처리
								@mixin button($type) {
								  @if $type == 'primary' {
								    background: #0a58ca;
								  } @else if $type == 'secondary' {
								    background: #6c757d;
								  } @else if $type == 'success' {
								    background: #28a745;
								  }

								  color: #ffffff;
								}

								.button-primary {
								  @include button('primary');
								}

조건문을 사용하면 하나의 믹스인으로 여러 상황을 처리할 수 있어 코드가 훨씬 간결해집니다.

@if 기본 문법

@if는 가장 기본적인 조건문입니다.
조건을 어떻게 작성하고, 어떤 블록이 실행되는지 이해해 두면 이후 @else, @else if를 조합할 때도 예측 가능한 스타일 분기를 만들 수 있습니다.

기본 구조

@if 뒤에 조건을 쓰고, 중괄호 안에 실행할 코드를 작성합니다.

								@if 조건 {
								  // 조건이 참일 때 실행할 코드
								}

								$is-dark: true;

								@if $is-dark {
								  body {
								    background: #000000;
								    color: #ffffff;
								  }
								}

$is-dark가 true이면 중괄호 안의 코드가 실행됩니다.

비교 연산자

조건문에서 사용할 수 있는 비교 연산자들입니다.

연산자
의미
예시

==

같다

$color == 'red'
!=

다르다

$color != 'red'
>

보다 크다

$size > 10
<

보다 작다

$size < 10
>=

보다 크거나 같다

$size >= 10
<=

보다 작거나 같다

$size <= 10

간단한 예시

조건문을 사용한 간단한 예시를 살펴봅니다.

								$theme: 'dark';

								@if $theme == 'dark' {
								  body {
								    background: #000000;
								    color: #ffffff;
								  }
								}

								body {
								  background: #000000;
								  color: #ffffff;
								}

$theme가 'dark'이므로 조건이 참이 되어 스타일이 적용됩니다.

@else 사용하기

@else는 조건이 거짓일 때 실행할 코드를 작성합니다.
다크/라이트 테마처럼 두 가지 경우를 나누는 상황에서, @else를 함께 사용하면 모든 경우를 빠짐없이 처리할 수 있어 스타일 누락을 방지할 수 있습니다.

@else 기본 구조

@if 뒤에 @else를 추가하여 두 가지 경우를 처리할 수 있습니다.

								@if 조건 {
								  // 조건이 참일 때
								} @else {
								  // 조건이 거짓일 때
								}

								$theme: 'light';

								@if $theme == 'dark' {
								  body {
								    background: #000000;
								    color: #ffffff;
								  }
								} @else {
								  body {
								    background: #ffffff;
								    color: #000000;
								  }
								}

								body {
								  background: #ffffff;
								  color: #000000;
								}

$theme가 'dark'가 아니므로 @else 블록이 실행됩니다.

실제 활용 예시

@else를 사용한 실제 활용 예시를 살펴봅니다.

								@mixin button($size) {
								  @if $size == 'large' {
								    padding: 12px 24px;
								    font-size: 18px;
								  } @else {
								    padding: 8px 16px;
								    font-size: 16px;
								  }
								}

								.button-large {
								  @include button('large');
								}

								.button-normal {
								  @include button('normal');
								}

이렇게 하면 크기에 따라 다른 패딩과 폰트 크기를 적용할 수 있습니다.

@else if 사용하기

@else if는 여러 조건을 순차적으로 확인할 때 사용합니다.
등급, 상태, 크기처럼 경우의 수가 셋 이상인 상황에서, 조건 순서와 범위를 잘 설계하면 유지보수가 쉬운 분기 구조를 만들 수 있습니다.

@else if 기본 구조

@if와 @else 사이에 @else if를 추가하여 여러 조건을 확인할 수 있습니다.

								@if 조건1 {
								  // 조건1이 참일 때
								} @else if 조건2 {
								  // 조건2가 참일 때
								} @else {
								  // 모든 조건이 거짓일 때
								}

								$size: 'medium';

								@if $size == 'small' {
								  .container {
								    padding: 8px;
								  }
								} @else if $size == 'medium' {
								  .container {
								    padding: 16px;
								  }
								} @else if $size == 'large' {
								  .container {
								    padding: 24px;
								  }
								} @else {
								  .container {
								    padding: 16px;  // 기본값
								  }
								}

								.container {
								  padding: 16px;
								}

$size가 'medium'이므로 두 번째 조건이 참이 되어 해당 스타일이 적용됩니다.

여러 조건 확인 예시

@else if를 여러 번 사용하여 여러 조건을 확인하는 예시입니다.

								@mixin button($type) {
								  @if $type == 'primary' {
								    background: #0a58ca;
								    color: #ffffff;
								  } @else if $type == 'secondary' {
								    background: #6c757d;
								    color: #ffffff;
								  } @else if $type == 'success' {
								    background: #28a745;
								    color: #ffffff;
								  } @else if $type == 'danger' {
								    background: #dc3545;
								    color: #ffffff;
								  } @else {
								    background: #f8f9fa;
								    color: #212529;
								  }
								}

								.button-primary {
								  @include button('primary');
								}

								.button-primary {
									background: #0a58ca;
									color: #ffffff;
								}

이렇게 하면 버튼 타입에 따라 다른 색상을 적용할 수 있습니다.

논리 연산자 사용

논리 연산자를 사용하여 더 복잡한 조건을 만들 수 있습니다.
and, or, not 같은 연산자를 이해해 두면, 디자인 시스템의 다양한 상태 조합을 깔끔하게 표현할 수 있습니다.

and 연산자

and는 모든 조건이 참일 때만 실행합니다.

								$theme: 'dark';
								$size: 'large';

								@if $theme == 'dark' and $size == 'large' {
								  body {
								    background: #000000;
								    font-size: 18px;
								  }
								}

$theme가 'dark'이고 $size가 'large'일 때만 실행됩니다.

or 연산자

or는 하나라도 조건이 참이면 실행합니다.

								$device: 'mobile';

								@if $device == 'mobile' or $device == 'tablet' {
								  .container {
								    width: 100%;
								  }
								}

$device가 'mobile'이거나 'tablet'이면 실행됩니다.

not 연산자

not은 조건을 반대로 만듭니다.

								$is-mobile: false;

								@if not $is-mobile {
								  .container {
								    max-width: 1200px;
								  }
								}

$is-mobile가 false이면 (즉, 모바일이 아니면) 실행됩니다.

믹스인과 함께 사용

조건문은 믹스인과 함께 사용하면 매우 강력합니다.

파라미터에 따른 조건 분기

믹스인의 파라미터에 따라 조건문으로 다른 스타일을 적용할 수 있습니다.

								@mixin button($type, $size: 'medium') {
								  // 타입에 따른 색상
								  @if $type == 'primary' {
								    background: #0a58ca;
								  } @else if $type == 'secondary' {
								    background: #6c757d;
								  } @else {
								    background: #f8f9fa;
								  }

								  // 크기에 따른 패딩
								  @if $size == 'small' {
								    padding: 6px 12px;
								    font-size: 14px;
								  } @else if $size == 'large' {
								    padding: 12px 24px;
								    font-size: 18px;
								  } @else {
								    padding: 8px 16px;
								    font-size: 16px;
								  }

								  color: #ffffff;
								  border-radius: 4px;
								}

								.button {
								  @include button('primary', 'large');
								}

이렇게 하면 타입과 크기에 따라 다양한 버튼 스타일을 하나의 믹스인으로 만들 수 있습니다.

조건부 속성 적용

조건에 따라 특정 속성만 적용할 수도 있습니다.

								@mixin card($shadow: true) {
								  background: #ffffff;
								  border-radius: 8px;
								  padding: 16px;

								  @if $shadow {
								    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
								  }
								}

								.card-with-shadow {
								  @include card(true);
								}

								.card-no-shadow {
								  @include card(false);
								}

실제 활용 예시

조건문을 실제 프로젝트에서 활용하는 예시를 살펴봅니다.

반응형 그리드 시스템

컬럼 개수에 따라 다른 그리드 스타일을 적용하는 예시입니다.

								@mixin grid($columns) {
								  display: grid;
								  gap: 16px;

								  @if $columns == 1 {
								    grid-template-columns: 1fr;
								  } @else if $columns == 2 {
								    grid-template-columns: repeat(2, 1fr);
								  } @else if $columns == 3 {
								    grid-template-columns: repeat(3, 1fr);
								  } @else if $columns == 4 {
								    grid-template-columns: repeat(4, 1fr);
								  } @else {
								    grid-template-columns: repeat(12, 1fr);
								  }
								}

								.grid-2 {
								  @include grid(2);
								}

								.grid-3 {
								  @include grid(3);
								}

테마 시스템

테마에 따라 다른 색상을 적용하는 예시입니다.

								@mixin theme($theme-name) {
								  @if $theme-name == 'light' {
								    --bg-color: #ffffff;
								    --text-color: #000000;
								  } @else if $theme-name == 'dark' {
								    --bg-color: #000000;
								    --text-color: #ffffff;
								  } @else if $theme-name == 'blue' {
								    --bg-color: #0a58ca;
								    --text-color: #ffffff;
								  }
								}

								:root {
								  @include theme('light');
								}

								[data-theme="dark"] {
								  @include theme('dark');
								}

유틸리티 클래스 생성

조건문을 사용하여 유틸리티 클래스를 동적으로 생성할 수 있습니다.

								@mixin spacing-utility($direction, $size) {
								  @if $direction == 'margin' {
								    margin: $size;
								  } @else if $direction == 'padding' {
								    padding: $size;
								  }

								  @if $size == 'small' {
								    $value: 8px;
								  } @else if $size == 'medium' {
								    $value: 16px;
								  } @else {
								    $value: 24px;
								  }
								}

								.mt-small {
								  @include spacing-utility('margin', 'small');
								}

조건문 사용 시 주의사항

조건문을 사용할 때 주의해야 할 사항들을 정리합니다.

조건 순서

조건은 위에서 아래로 순차적으로 확인됩니다.
먼저 만족하는 조건이 실행되므로, 순서가 중요합니다.

								$size: 15;

								// 잘못된 순서
								@if $size > 10 {
								  // 이 조건이 먼저 실행됨
								} @else if $size > 20 {
								  // 이 조건은 실행되지 않음
								}

								// 올바른 순서
								@if $size > 20 {
								  // 더 구체적인 조건을 먼저
								} @else if $size > 10 {
								  // 그 다음 조건
								}

기본값 처리

모든 조건이 만족되지 않을 경우를 대비하여 @else로 기본값을 제공하는 것이 좋습니다.

								@mixin button($type) {
								  @if $type == 'primary' {
								    background: #0a58ca;
								  } @else if $type == 'secondary' {
								    background: #6c757d;
								  } @else {
								    // 예상하지 못한 값에 대한 기본값
								    background: #f8f9fa;
								  }
								}

정리

@if, @else 조건문에 대해 알아본 내용을 정리합니다.

조건문의 개념: 조건에 따라 다른 스타일을 적용하는 기능
@if 기본 문법: 조건이 참일 때 실행할 코드 작성
@else: 조건이 거짓일 때 실행할 코드 작성
@else if: 여러 조건을 순차적으로 확인
논리 연산자: and, or, not을 사용하여 복잡한 조건 생성
믹스인과 함께 사용: 파라미터에 따라 조건 분기, 조건부 속성 적용
활용 예시: 반응형 그리드, 테마 시스템, 유틸리티 클래스 생성
주의사항: 조건 순서, 기본값 처리

다음 페이지에서는 @for 반복문의 기본 구조를 자세히 알아봅니다.