[개념정리] SCSS 변수 vs Mixin 차이

SCSS 변수 방식

// _shadows.scss
$shadow-1: 0px 1px 2px rgba(0, 0, 0, 0.08);

// Card.scss
@use './shadows' as *;

.card {
  box-shadow: $shadow-1;
}

• 정의 방식 : 단순 값(box-shadow)만 저장
• 장점 : 간단하고 직관적, 코드가 짧음
• 단점 : box-shadow 이외의 속성을 묶어 쓰기는 어려움
• 추천 상황 : 단순히 한 줄짜리 그림자 값만 재사용할 때

Mixin 방식

// _shadows.scss
@mixin shadow-1 {
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
}

// 이 외의 속성 추가
@mixin shadow-card {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
}


// Card.scss
@use './shadows' as *;

.card {
  @include shadow-1; // 혹은 shadow-card 사용 가능
}

• 정의 방식 : CSS 속성 전체 저장 가능
• 장점 : 확장성이 큼(box-shadow 외에 여러 스타일을 함께 정의 가능)
• 단점 : 변수보다 문법이 약간 길고 복잡
• 추천 상황 : 그림자와 함께 border-radius, transition 등 여러 속성을 묶어 재사용할 때