SCSS에 대해

SCSS는:

CSS를 더 편리하게 작성할 수 있게 해주는 '확장된 CSS'라고 생각하면 됨.

1. 변수 사용
   기존 CSS에서 반복되는 값을 변수로 저장할 수 있음:

// SCSS
$main-color: #3498db;
$font-size: 16px;

.button {
    background: $main-color;
    font-size: $font-size;
}

2. 중첩 구조
   HTML 구조처럼 CSS를 중첩해서 작성할 수 있음:

// SCSS
.navbar {
    background: black;
    
    ul {
        list-style: none;
        
        li {
            display: inline-block;
            
            a {
                color: white;
                &:hover {  // & 는 부모 선택자를 의미
                    color: blue;
                }
            }
        }
    }
}

3. 믹스인 (재사용 가능한 스타일 묶음)
   자주 사용하는 스타일을 함수처럼 만들어 재사용:

// 믹스인 정의
@mixin button-style {
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
}

// 믹스인 사용
.submit-button {
    @include button-style;
    background: blue;
}

.cancel-button {
    @include button-style;
    background: red;
}

4. 상속
   공통 스타일을 상속받을 수 있음:

// 기본 스타일
%message-shared {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
}

// 상속 사용
.success-message {
    @extend %message-shared;
    border-color: green;
}

.error-message {
    @extend %message-shared;
    border-color: red;
}

5. 연산 기능
   CSS 내에서 간단한 계산이 가능:

.container {
    width: 100%;
}

.content {
    width: 600px / 960px * 100%;  // 반응형 너비 계산
}

SCSS의 장점:
1. 코드 재사용성 증가
2. 유지보수가 쉬워짐
3. 코드 구조가 깔끔해짐
4. 계산이나 함수 사용 가능

사용 예시:

// 변수 정의
$primary-color: #3498db;
$secondary-color: #2ecc71;
$padding-base: 15px;

// 믹스인 정의
@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

// 실제 스타일 적용
.card {
    background: white;
    padding: $padding-base;
    border-radius: 8px;
    
    .card-header {
        @include flex-center;
        background: $primary-color;
        color: white;
    }
    
    .card-content {
        padding: $padding-base;
        
        p {
            line-height: 1.5;
            color: #333;
            
            &:hover {
                color: $secondary-color;
            }
        }
    }
}

요약:

SCSS는 CSS를 더 프로그래밍적으로 작성할 수 있게 해줌.
코드의 재사용성과 유지보수성을 크게 향상시킴.