[SCSS] Mixin 완벽 가이드 – 반복 코드를 줄이고 유지보수성을 높이는 방법

SCSS mixin 사용법 예제 코드 에디터 이미지

 
Mixin은 재사용 가능한 스타일 블록을 정의해두고 필요할 때마다 불러와서 사용할 수 있는 기능입니다.
이전 글에서 다뤘던 변수(Variables) 와 함께 활용하면, 코드 효율과 유지보수성이 크게 향상됩니다.

---

✅ Mixin 기본 문법

@mixin 키워드로 재사용할 스타일을 정의하고,
@include 키워드로 불러와 적용합니다.

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  @include flex-center;
  width: 100px;
  height: 100px;
  background: lightblue;
}

 
위 예제에서는 flex-center라는 Mixin을 정의하고,
.box 클래스에서 @include flex-center로 호출했습니다.
그 결과, .box 요소는 항상 가로·세로 중앙 정렬이 됩니다.

---

✅ 파라미터 활용

Mixin은 함수처럼 인자(파라미터) 를 받을 수 있습니다.
이렇게 하면 더 동적인 스타일을 작성할 수 있습니다.

@mixin font-size($size, $weight: normal) {
  font-size: $size;
  font-weight: $weight;
}

.title {
  @include font-size(24px, bold);
}

.text {
  @include font-size(16px);
}

• @mixin font-size($size, $weight: normal)
  → 글자 크기와 굵기를 지정하는 Mixin
• $weight에는 기본값을 normal로 설정했기 때문에
  인자를 생략하면 자동으로 normal이 적용됩니다.

---

✅ 조건문과 함께 사용하기

조건문(@if, @else)을 사용하면 상황에 따라 다른 스타일을 적용할 수도 있습니다.

@mixin theme($mode) {
  @if $mode == light {
    background: #fff;
    color: #000;
  } @else if $mode == dark {
    background: #000;
    color: #fff;
  }
}

.body-light {
  @include theme(light);
}

.body-dark {
  @include theme(dark);
}

 
이렇게 하면 라이트 모드 / 다크 모드를 쉽게 분리할 수 있습니다.

---

✅ 실무에서 자주 쓰는 Mixin 예시

📱 반응형 미디어쿼리

@mixin responsive($device) {
  @if $device == mobile {
    @media (max-width: 768px) { @content; }
  } @else if $device == tablet {
    @media (max-width: 1024px) { @content; }
  }
}

.container {
  width: 1200px;

  @include responsive(mobile) {
    width: 100%;
  }
}

 

👉 반응형 작업 시 자주 반복되는 미디어쿼리를 깔끔하게 정리할 수 있습니다.

🔘 버튼 스타일

@mixin button($bg, $color: #fff) {
  background: $bg;
  color: $color;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
}
.primary-btn {
  @include button(#007bff);
}

 
👉 색상만 바꿔주면 여러 버튼 스타일을 손쉽게 만들 수 있습니다.

---

✅ 마무리

SCSS Mixin은 재사용 + 유지보수 + 가독성을 동시에 챙길 수 있는 핵심 기능입니다.
반복되는 코드를 줄이고, 상황에 맞게 인자와 조건문을 활용하면 CSS 작성 효율이 크게 올라갑니다.
다음 글에서는 @extend와 Mixin의 차이를 비교하면서, 어떤 상황에서 더 적합한지 다뤄보겠습니다.

---

📌 관련글

• React에서 SCSS 사용법: sass 설치와 활용 가이드
• SCSS 변수 완벽 가이드: 입문자도 쉽게 이해하는 활용 팁
• React 컴포넌트 비교: 함수형 vs 클래스형 차이와 Front-end 개발 선택 기준