이번에는 SCSS 기본 문법을 배워보면서 CSS를 더 효율적으로 작성하는 방법을 알아보겠습니다! 🎨

SCSS가 무엇인가요?

SCSS(Sassy CSS)는 CSS 전처리기 언어로, CSS에 프로그래밍 기능을 추가한 것입니다. 일반 CSS와 100% 호환되면서도 강력한 기능들을 제공합니다!

SCSS의 주요 특징

  • 변수 사용 가능: 색상, 폰트, 크기 등을 변수로 관리
  • 중첩(Nesting) 지원: HTML 구조와 동일하게 CSS 작성
  • 믹스인(Mixin)으로 재사용: 반복되는 스타일을 함수처럼 사용
  • 함수와 연산 기능: 계산과 조건문으로 동적 스타일링
  • 파셜과 임포트: 파일을 나누어 모듈화된 관리

왜 SCSS를 사용해야 할까요? 기존 CSS의 한계를 극복하고, 대규모 프로젝트에서도 유지보수가 쉬운 스타일시트를 작성할 수 있기 때문입니다!

기본 문법 배우기

1. 변수 (Variables)

SCSS 변수는 $변수명: 값; 형태로 선언하며, 색상, 폰트, 크기 등 반복되는 값을 저장해 재사용할 수 있습니다. 디자인 시스템의 핵심입니다!

// SCSS 변수 선언
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-size-base: 16px;
$margin-default: 20px;

// 변수 사용 예시
.button {
    background-color: $primary-color;
    font-size: $font-size-base;
    margin: $margin-default;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
}

변수의 장점:

  • 한 곳에서 값을 변경하면 전체에 적용됩니다
  • 일관성 있는 디자인을 유지할 수 있습니다
  • 오타를 방지하고 유지보수가 용이합니다
  • 의미 있는 이름으로 가독성을 향상시킵니다

2. 중첩 (Nesting)

SCSS의 중첩 문법을 사용하면 HTML 구조와 동일하게 CSS를 작성할 수 있습니다. 부모-자식 관계를 들여쓰기로 표현하여 가독성이 크게 향상됩니다!

// SCSS 중첩 문법
.nav {
    background: #333;
    padding: 1rem;
    
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
    }
    
    li {
        margin-right: 1rem;
        
        a {
            color: white;
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            transition: background-color 0.3s;
            
            // &는 부모 선택자 참조
            &:hover {
                background-color: rgba(255, 255, 255, 0.1);
            }
            
            &.active {
                background-color: $primary-color;
            }
        }
    }
}

중첩 사용 시 주의사항:

  • 너무 깊은 중첩(3-4단계 이상)은 피해야 합니다
  • &(앰퍼샌드)로 부모 선택자를 참조합니다
  • 가독성을 위해 적절한 들여쓰기를 유지합니다

3. 믹스인 (Mixins)

믹스인은 재사용 가능한 스타일 묶음을 만드는 기능입니다. 함수처럼 매개변수를 받아 동적으로 스타일을 생성할 수 있습니다!

// 기본 믹스인 정의
@mixin button-style($bg-color, $text-color: white, $size: medium) {
    background-color: $bg-color;
    color: $text-color;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    
    // 크기별 조건부 스타일
    @if $size == small {
        padding: 6px 12px;
        font-size: 12px;
    } @else if $size == large {
        padding: 15px 30px;
        font-size: 18px;
    } @else {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
}

// 믹스인 사용
.btn-primary {
    @include button-style($primary-color);
}

.btn-danger {
    @include button-style(#e74c3c, white, large);
}

믹스인의 활용 예시:

  • 버튼, 카드, 모달 등 컴포넌트 스타일
  • 반응형 미디어 쿼리
  • 애니메이션 효과
  • 그리드 시스템

고급 기능들

4. 파셜 & 임포트

파셜(Partial)은 언더스코어(_)로 시작하는 SCSS 파일로, 다른 파일에서 임포트하여 사용합니다. 코드를 모듈화하여 관리하기 쉽게 만들어줍니다!

// _variables.scss 파일
$primary: #3498db;
$secondary: #2ecc71;
$danger: #e74c3c;

// _mixins.scss 파일
@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

// main.scss 파일
@import 'variables';
@import 'mixins';

.container {
    @include flex-center;
    background: $primary;
    min-height: 100vh;
}

5. 함수와 연산

SCSS에서는 사용자 정의 함수를 만들고 수학적 연산을 수행할 수 있습니다. 동적인 스타일링의 핵심입니다!

// 함수 정의
@function calculate-rem($size) {
    @return #{$size / 16}rem;
}

// 색상 밝기 계산 함수
@function lighten-color($color, $amount) {
    @return lighten($color, $amount);
}

// 연산 사용
$base-font-size: 16px;
$large-font: $base-font-size * 1.5;
$container-width: 1200px;
$sidebar-width: $container-width / 4;

.title {
    font-size: calculate-rem(24); // 1.5rem
    margin-bottom: $large-font; // 24px
    color: lighten-color($primary, 20%);
}

6. 조건문과 반복문

SCSS는 프로그래밍 언어처럼 조건문과 반복문을 지원합니다. 복잡한 스타일 로직을 자동화할 수 있습니다!

// 조건문 예시
@mixin button-size($size) {
    @if $size == small {
        padding: 5px 10px;
        font-size: 12px;
    } @else if $size == large {
        padding: 15px 30px;
        font-size: 18px;
    } @else {
        padding: 10px 20px;
        font-size: 14px;
    }
}

// 반복문으로 그리드 시스템 생성
@for $i from 1 through 12 {
    .col-#{$i} {
        width: percentage($i / 12);
        float: left;
    }
}

// 색상 팔레트 자동 생성
$colors: (
    'primary': #3498db,
    'success': #2ecc71,
    'danger': #e74c3c
);

@each $name, $color in $colors {
    .btn-#{$name} {
        background-color: $color;
        border-color: darken($color, 10%);
    }
}

실전 예시

완전한 카드 컴포넌트 만들기

지금까지 배운 모든 기능을 활용해서 재사용 가능한 카드 컴포넌트를 만들어보겠습니다!

// 변수 설정
$card-bg: white;
$card-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
$card-border-radius: 8px;
$card-padding: 20px;

// 카드 호버 효과 믹스인
@mixin card-hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

// 반응형 카드 믹스인
@mixin responsive-card($breakpoint: 768px) {
    @media (max-width: $breakpoint) {
        margin: 10px;
        padding: 15px;
    }
}

// 카드 컴포넌트
.card {
    background: $card-bg;
    border-radius: $card-border-radius;
    box-shadow: $card-shadow;
    padding: $card-padding;
    margin: 20px;
    overflow: hidden;
    
    &:hover {
        @include card-hover;
    }
    
    @include responsive-card;
    
    .card-header {
        border-bottom: 1px solid #eee;
        margin-bottom: 15px;
        padding-bottom: 15px;
        
        .card-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin: 0;
            color: #333;
        }
    }
    
    .card-content {
        color: #666;
        line-height: 1.6;
        margin-bottom: 15px;
    }
    
    .card-footer {
        border-top: 1px solid #eee;
        padding-top: 15px;
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

SCSS의 장점과 실무 활용

SCSS를 사용해야 하는 이유

SCSS를 사용하면 CSS 작성이 훨씬 편해집니다!

  • 코드 재사용성 높아짐: 믹스인과 함수로 중복을 제거합니다
  • 유지보수 용이함: 변수로 일관성 있는 디자인을 관리합니다
  • 가독성 향상: 중첩과 모듈화로 구조적 코딩이 가능합니다
  • 개발 속도 증가: 자동화된 스타일 생성으로 효율성을 높입니다
  • 팀 협업 개선: 표준화된 코드 스타일로 협업이 원활해집니다

실무에서의 SCSS 활용 팁

  • 파일 구조화: _variables, _mixins, _components로 분리합니다
  • 네이밍 컨벤션: BEM 방법론과 함께 사용합니다
  • 성능 최적화: 불필요한 중첩을 피합니다
  • 빌드 도구 연동: Webpack, Gulp 등과 함께 사용합니다

Cursor에서 SCSS를 작성하고 자동으로 WordPress에 올리는 워크플로우로 더 효율적인 개발을 해보시기 바랍니다! ✨

관련 링크 및 참고자료