SCSS 변수는 CSS 작성을 혁신적으로 바꿔주는 핵심 기능입니다! 재사용성과 유지보수성을 극대화할 수 있어요. 🎯

변수란 무엇인가요?

SCSS 변수는 값을 저장하고 재사용할 수 있는 컨테이너입니다. $ 기호로 시작하며, CSS에서 반복적으로 사용되는 값들을 효율적으로 관리할 수 있습니다.

  • 코드 중복 제거
  • 일관된 디자인 시스템 구축
  • 쉬운 테마 변경
  • 유지보수 효율성 증대

기본 문법과 사용법

1. 변수 선언과 기본 사용

SCSS 변수의 핵심은 $ 기호입니다! 변수명 앞에 달러 사인을 붙이면 값을 저장할 수 있어요.

핵심 포인트:

  • 일관성: 동일한 색상이나 폰트를 여러 곳에서 사용할 때 실수 방지
  • 효율성: 한 곳에서 값을 바꾸면 모든 곳에 자동 적용
  • 가독성: 의미 있는 이름으로 코드의 의도를 명확하게 표현
// 변수 선언 - $변수명: 값;
$primary-color: #3498db;
$secondary-color: #2ecc71;
$danger-color: #e74c3c;

// 폰트 관련 변수
$font-family-base: 'Helvetica Neue', Arial, sans-serif;
$font-size-base: 16px;
$line-height-base: 1.6;

// 사용 예시
.header {
    background-color: $primary-color;
    font-family: $font-family-base;
}

2. 변수 타입들

SCSS는 다양한 데이터 타입을 지원합니다! 각 타입별로 특성과 활용법이 다르니 잘 이해하고 사용하는 것이 중요해요.

  • Numbers: 단위가 있는/없는 숫자 (px, em, %, 정수, 소수)
  • Colors: 모든 CSS 색상 형식 지원 (hex, rgb, hsl, 키워드)
  • Strings: 따옴표 있는/없는 문자열, 경로나 폰트명에 유용
  • Booleans: true/false 값, 조건부 스타일링에 활용
  • Lists: 공백이나 쉼표로 구분된 값들의 목록
  • Maps: 키-값 쌍으로 구성된 복잡한 데이터 구조
// 숫자 (Numbers)
$width: 100px;
$opacity: 0.8;

// 색상 (Colors)
$color-hex: #ff6b6b;
$color-rgb: rgb(255, 107, 107);

// 문자열 (Strings)
$font-path: '../fonts/';

// 맵 (Maps)
$breakpoints: (
    'small': 768px,
    'medium': 1024px,
    'large': 1200px
);

변수 스코프와 고급 기능

전역 vs 지역 변수

변수의 스코프(Scope)는 변수가 어디서 사용할 수 있는지를 결정합니다.

  • 전역 변수: 파일 최상단에 선언, 어디서든 접근 가능
  • 지역 변수: 블록({}) 내부에서만 사용 가능
  • !global 플래그: 지역 스코프에서 전역 변수 수정 가능
// 전역 변수
$global-color: #333;

.navbar {
    // 지역 변수
    $local-padding: 20px;
    padding: $local-padding;
    color: $global-color;
}

기본값 설정 (!default)

!default 플래그는 변수가 이미 정의되어 있으면 새 값을 무시하는 기능입니다.

  • 조건부 할당: 변수가 이미 정의되어 있으면 새 값을 무시
  • 기본값 보장: 변수가 없으면 default 값으로 초기화
  • 라이브러리 친화적: Bootstrap, Foundation 등에서 광범위하게 사용
// !default를 사용한 기본값 설정
$primary-color: #007bff !default;
$font-size-base: 16px !default;
$border-radius: 4px !default;

// 조건부 스타일링
$enable-rounded: true !default;

.card {
    @if $enable-rounded {
        border-radius: $border-radius;
    }
}

변수 보간 (Interpolation)

변수 보간은 #{} 문법을 사용해서 변수를 문자열 안에 삽입하는 기술입니다!

  • 선택자명: 클래스나 ID 이름에 변수 사용
  • 속성명: CSS 속성 이름을 동적으로 생성
  • URL 경로: 이미지나 폰트 경로에 변수 포함
  • 미디어 쿼리: 브레이크포인트 값을 변수로 관리
// #{} 문법으로 변수 보간
$prefix: 'app';
$size: 'large';

// 클래스명에 변수 사용
.#{$prefix}-button-#{$size} {
    padding: 12px 24px;
}

// URL에 변수 사용
$image-path: '/assets/images';
.hero {
    background-image: url('#{$image-path}/hero.jpg');
}

실전 예제: 완전한 디자인 시스템

프로페셔널 변수 시스템 구축

대기업들이 사용하는 방식으로 체계적인 디자인 시스템을 구축해보세요!

  • 색상 팔레트: 기본/의미적 색상 + 그레이스케일 체계
  • 타이포그래피: 폰트 패밀리, 크기, 두께의 일관된 스케일
  • 간격 시스템: 8의 배수 기반 패딩/마진 규칙
  • 컴포넌트 토큰: 버튼, 카드 등 재사용 요소의 스타일
// === 색상 시스템 ===
$blue: #007bff;
$green: #28a745;
$red: #dc3545;

// 의미적 색상
$primary: $blue;
$success: $green;
$danger: $red;

// === 타이포그래피 ===
$font-family-base: 'Inter', Arial, sans-serif;
$font-size-base: 1rem;
$font-size-lg: 1.125rem;

// === 간격 시스템 ===
$spacer: 1rem;
$spacers: (
    0: 0,
    1: $spacer * 0.25,
    2: $spacer * 0.5,
    3: $spacer,
    4: $spacer * 1.5,
);

// === 실제 사용 예시 ===
.btn {
    font-family: $font-family-base;
    font-size: $font-size-base;
    padding: map-get($spacers, 2) map-get($spacers, 3);
    
    &.btn-primary {
        background-color: $primary;
        color: white;
    }
}

실무에서 사용하는 변수 패턴

테마 시스템 구축

다크 모드와 라이트 모드를 지원하는 동적 테마 시스템을 만들어보세요!

// 테마 변수 시스템
$themes: (
    'light': (
        'bg-primary': #ffffff,
        'text-primary': #333333,
        'border-color': #e1e1e1
    ),
    'dark': (
        'bg-primary': #1a1a1a,
        'text-primary': #ffffff,
        'border-color': #404040
    )
);

// 테마 믹스인
@mixin theme($theme-name) {
    $theme: map-get($themes, $theme-name);
    
    background-color: map-get($theme, 'bg-primary');
    color: map-get($theme, 'text-primary');
}

// 사용 예시
.app {
    @include theme('light');
    
    &.dark-mode {
        @include theme('dark');
    }
}

베스트 프랙티스

변수 명명 규칙과 조직화

좋은 변수명은 코드의 가독성과 유지보수성을 결정합니다!

  • 의미적 네이밍: 색상명 대신 용도를 나타내는 이름 사용
  • 케밥 케이스: 하이픈(-)을 사용한 소문자 표기법
  • 접두사 활용: 카테고리별로 접두사로 그룹화
  • 파일 분리: 기능별로 별도 파일로 관리
// ✅ 좋은 예시
$color-primary: #007bff;
$font-size-heading-1: 2.5rem;
$spacing-component-padding: 1rem;

// ❌ 피해야 할 예시
$blue: #007bff;
$big-text: 2.5rem;
$p: 1rem;

SCSS 변수 마스터하기

SCSS 변수를 마스터하면 CSS 작성이 완전히 달라집니다!

  • 일관된 디자인 시스템 구축
  • 손쉬운 테마 변경과 브랜딩
  • 코드 중복 제거와 유지보수성 향상
  • 개발 팀 간의 협업 효율성 증대

변수는 SCSS의 가장 기본적이면서도 강력한 기능입니다. 체계적으로 활용해서 전문적인 CSS 개발을 시작해보세요! 🚀

관련 링크:

• Sass 공식 변수 문서

• Sass 데이터 타입

• Sass 변수 보간

SCSSVariables변수CSS디자인시스템