SCSS @mixin 활용법 총정리! 실무에서 자주 쓰는 패턴까지 완벽 해설

 

 

SCSS는 CSS를 더 모듈화하고 재사용 가능하게 만들어주는 CSS 전처리기입니다.
그중 @mixin은 반복되는 스타일을 묶어서 재사용할 수 있도록 해주는 기능입니다.
즉, 자주 사용하는 CSS를 일일이 복붙하지 않고 한 번에 불러와 사용할 수 있습니다! 🔁

---

🧪 1. 기본 문법

@mixin 이름 {
  스타일속성: 값;
}

 

사용할 때는 @include 키워드를 사용합니다:

@include 이름;

 

---

💡 2. 간단 예제

📌 예제: 공통 버튼 스타일 만들기

@mixin button-style {
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}

 

사용 예:

.btn-primary {
  @include button-style;
  background-color: #007bff;
  color: #fff;
}

 

---

🧩 3. 매개변수(Parameter) 활용

믹스인은 함수처럼 값을 전달할 수도 있습니다.

 

@mixin size($width, $height) {
  width: $width;
  height: $height;
}

.box {
  @include size(100px, 200px);
}

 

📌 결과 CSS:

 

.box {
  width: 100px;
  height: 200px;
}

 

---

🎛️ 4. 기본값 설정

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

 

.text-title {
  @include font(24px, bold);
}
.text-body {
  @include font(); // 기본값 사용
}

 

---

🌐 5. 실무에서 자주 사용하는 믹스인 패턴

✅ 미디어쿼리 반응형 설정

 

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

 

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

 

---

✅ 다크모드 스타일 처리

 

@mixin dark-mode {
  @media (prefers-color-scheme: dark) {
    @content;
  }
}

body {
  background: #fff;

  @include dark-mode {
    background: #222;
  }
}

 

---

🔍 6. @extend와의 차이점

구분	@mixin	@extend
스타일 재사용	✅ 가능	✅ 가능
매개변수 전달	✅ 가능	❌ 불가능
코드 중복	약간 발생	중복 없음
실무 추천	✅ 높음	보통

👉 대부분의 실무 상황에서는 유연한 재사용이 가능한 @mixin을 더 선호합니다.

---

📝 마무리 요약

• 🔁 @mixin은 반복되는 CSS를 재사용할 수 있게 해주는 SCSS 기능입니다.
• 📥 @include를 통해 필요한 스타일을 불러옵니다.
• 🧠 매개변수, 반응형, 다크모드 등 다양한 상황에 응용 가능합니다.
• ✅ 코드 가독성, 유지보수성, 생산성 향상에 매우 효과적입니다!