SCSS 조건문과 반복문은 프로그래밍 로직을 CSS에 도입하는 혁신적 기능입니다! 자동화와 효율성을 극대화할 수 있어요. 🎯

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

조건문을 사용하면 특정 조건에 따라 다른 스타일을 적용할 수 있습니다. 테마 시스템이나 반응형 디자인에서 매우 유용해요!

테마별 다른 스타일 자동 적용
브라우저 호환성 조건부 처리
사용자 설정에 따른 동적 스타일
복잡한 로직의 간단한 구현

조건문 활용 예시

스마트 테마 시스템

조건문을 활용하면 지능적인 테마 시스템을 구축할 수 있습니다! 하나의 변수 변경으로 전체 디자인이 자동으로 바뀝니다.

// 테마 설정
$theme: 'dark'; // 'light' 또는 'dark'

// 조건부 색상 설정
@mixin theme-colors {
    @if $theme == 'dark' {
        background-color: #2c3e50;
        color: #ecf0f1;
        border-color: #34495e;
    } @else if $theme == 'light' {
        background-color: #ffffff;
        color: #2c3e50;
        border-color: #bdc3c7;
    } @else {
        background-color: #f8f9fa;
        color: #495057;
        border-color: #dee2e6;
    }
}

.card {
    @include theme-colors;
    padding: 2rem;
    border-radius: 8px;
}

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

@for 반복문으로 그리드 시스템 생성

@for 반복문은 규칙적인 패턴을 자동으로 생성할 때 매우 유용합니다! 그리드 시스템이나 유틸리티 클래스를 한 번에 만들 수 있어요.

// 12컬럼 그리드 시스템 자동 생성
@for $i from 1 through 12 {
    .col-#{$i} {
        width: percentage($i / 12);
    }
}

// 마진/패딩 유틸리티 클래스
@for $i from 0 through 5 {
    .m-#{$i} {
        margin: $i * 0.5rem;
    }
    
    .p-#{$i} {
        padding: $i * 0.5rem;
    }
}

@each 반복문으로 색상 팔레트 생성

@each 반복문은 리스트나 맵 데이터를 순회하며 스타일을 생성합니다. 색상 팔레트나 아이콘 시스템에 완벽해요!

// 색상 맵 정의
$colors: (
    'primary': #3498db,
    'success': #2ecc71,
    'warning': #f39c12,
    'danger': #e74c3c,
    'info': #9b59b6
);

// 색상별 버튼 클래스 자동 생성
@each $name, $color in $colors {
    .btn-#{$name} {
        background-color: $color;
        color: white;
        border: 2px solid $color;
        
        &:hover {
            background-color: darken($color, 10%);
        }
    }
    
    .text-#{$name} {
        color: $color;
    }
    
    .bg-#{$name} {
        background-color: $color;
    }
}

조건문과 반복문의 핵심 포인트

프로그래밍 로직으로 CSS를 자동화하고 체계화할 수 있습니다!

조건문으로 스마트한 테마 시스템 구축
반복문으로 대량의 유틸리티 클래스 자동 생성
복잡한 로직을 간단한 코드로 구현
유지보수가 쉬운 확장 가능한 시스템

SCSSConditionalsLoops자동화