SCSS 논리와 제어문 (@if, @for, @each)

9. 제어문 (@if, @for, @each)

CSS는 프로그래밍 언어가 아니기 때문에 조건에 따라 스타일을 바꾸거나 수십 개의 클래스를 반복해서 생성하는 것이 불가능했습니다.

SCSS는 프로그래밍 언어의 제어문(Control Flow)을 완벽하게 지원합니다. @if로 다크모드 여부를 판별하고, @for나 @each 반복문을 통해 .mt-1부터 .mt-10까지의 유틸리티 클래스를 단 3줄의 코드로 자동으로 생성해낼 수 있습니다.

제어문	자바스크립트 비교	사용 목적
@if / @else	`if () {} else {}`	테마(Light/Dark)나 조건에 따라 다른 스타일 분기
@for	`for (let i=1; i<=10; i++)`	1부터 N까지 순차적으로 증가하며 클래스 생성 (예: 그리드 시스템)
@each	`array.forEach()`	컬러 리스트나 아이콘 목록 등 배열 데이터를 순회하며 생성

코드 예시 및 컴파일 결과

HTML 구조

<!-- 생성된 유틸리티 클래스를 HTML에서 바로 사용 -->
<div class="mb-3 text-primary">마진 바텀 24px, 프라이머리 색상입니다.</div>
<div class="p-5 text-danger">패딩 40px, 위험 색상입니다.</div>

SCSS 작성 및 컴파일 결과

/* SCSS @for 및 @each 반복문 예시 */
/*
// 1. @for: 숫자를 반복하여 Margin, Padding 클래스 생성
// $i가 1부터 5까지 반복됩니다.
@for $i from 1 through 5 {
  .mt-#{$i} { margin-top: #{$i * 8}px; }
  .mb-#{$i} { margin-bottom: #{$i * 8}px; }
  .p-#{$i}  { padding: #{$i * 8}px; }
}

// 2. @each: 맵(Map, 자바스크립트의 객체와 유사) 순회하며 색상 클래스 생성
$theme-colors: (
  "primary": #0d6efd,
  "success": #198754,
  "danger": #dc3545
);

@each $name, $color in $theme-colors {
  // $name은 키(primary 등), $color는 값(#0d6efd 등)
  .text-#{$name} {
    color: $color;
  }
  .bg-#{$name} {
    background-color: $color;
  }
}
*/

/* 컴파일된 실제 CSS (자동으로 대량 생성됨!) */
.mt-1 { margin-top: 8px; }
.mb-1 { margin-bottom: 8px; }
.p-1 { padding: 8px; }
.mt-2 { margin-top: 16px; }
.mb-2 { margin-bottom: 16px; }
.p-2 { padding: 16px; }
/* ... (3, 4 생략) ... */
.mt-5 { margin-top: 40px; }
.mb-5 { margin-bottom: 40px; }
.p-5 { padding: 40px; }

.text-primary { color: #0d6efd; }
.bg-primary { background-color: #0d6efd; }
.text-success { color: #198754; }
.bg-success { background-color: #198754; }
.text-danger { color: #dc3545; }
.bg-danger { background-color: #dc3545; }

제어문

자바스크립트 비교

사용 목적

@if / @else

if () {} else {}

테마(Light/Dark)나 조건에 따라 다른 스타일 분기

@for

for (let i=1; i<=10; i++)

1부터 N까지 순차적으로 증가하며 클래스 생성 (예: 그리드 시스템)

@each

array.forEach()

컬러 리스트나 아이콘 목록 등 배열 데이터를 순회하며 생성

 <div class="mb-3 text-primary">마진 바텀 24px, 프라이머리 색상입니다.</div> <div class="p-5 text-danger">패딩 40px, 위험 색상입니다.</div>

/* SCSS @for 및 @each 반복문 예시 */ /* // 1. @for: 숫자를 반복하여 Margin, Padding 클래스 생성 // $i가 1부터 5까지 반복됩니다. @for $i from 1 through 5 { .mt-#{$i} { margin-top: #{$i * 8}px; } .mb-#{$i} { margin-bottom: #{$i * 8}px; } .p-#{$i} { padding: #{$i * 8}px; } } // 2. @each: 맵(Map, 자바스크립트의 객체와 유사) 순회하며 색상 클래스 생성 $theme-colors: ( "primary": #0d6efd, "success": #198754, "danger": #dc3545 ); @each $name, $color in $theme-colors { // $name은 키(primary 등), $color는 값(#0d6efd 등) .text-#{$name} { color: $color; } .bg-#{$name} { background-color: $color; } } */ /* 컴파일된 실제 CSS (자동으로 대량 생성됨!) */ .mt-1 { margin-top: 8px; } .mb-1 { margin-bottom: 8px; } .p-1 { padding: 8px; } .mt-2 { margin-top: 16px; } .mb-2 { margin-bottom: 16px; } .p-2 { padding: 16px; } /* ... (3, 4 생략) ... */ .mt-5 { margin-top: 40px; } .mb-5 { margin-bottom: 40px; } .p-5 { padding: 40px; } .text-primary { color: #0d6efd; } .bg-primary { background-color: #0d6efd; } .text-success { color: #198754; } .bg-success { background-color: #198754; } .text-danger { color: #dc3545; } .bg-danger { background-color: #dc3545; }