@mixin과 @include 기본 문법 - by. UXKM

Publishing
SCSS
믹스인(Mixin) 이해하기
@mixin과 @include 기본 문법

요약 설명
SCSS 믹스인은 @mixin으로 정의하고 @include로 사용합니다.
기본 문법을 익히면 재사용 가능한 스타일 블록을 효율적으로 만들고 사용할 수 있습니다.

이 페이지에서는 @mixin과 @include의 기본 문법, @content를 사용한 동적 콘텐츠 삽입, 그리고 실제 사용 예시를 상세히 알아봅니다.

@mixin - 믹스인 정의

@mixin은 믹스인을 정의할 때 사용하는 키워드입니다.
믹스인의 이름과 안에 들어갈 스타일 블록을 어떻게 구성하는지가 이후 재사용성과 가독성에 큰 영향을 주기 때문에, 기본 문법을 확실히 정리해 두는 것이 좋습니다.

기본 문법

@mixin 뒤에 믹스인 이름을 쓰고, 중괄호 안에 스타일을 작성합니다.

								@mixin 믹스인-이름 {
								  속성: 값;
								  속성: 값;
								}

								@mixin button-style {
								  padding: 8px 16px;
								  background: #0a58ca;
								  color: #ffffff;
								  border-radius: 4px;
								}

믹스인 이름은 변수명과 동일한 규칙을 따릅니다 (영문자, 숫자, 하이픈, 언더스코어 사용 가능).

믹스인 네이밍 규칙

믹스인 이름은 의미를 명확하게 전달하는 것이 좋습니다.

								// ✅ 좋은 예시: 용도가 명확함
								@mixin flex-center {
								  display: flex;
								  justify-content: center;
								  align-items: center;
								}
								@mixin card-shadow {
								  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
								}

								// ❌ 나쁜 예시: 의미가 불명확함
								@mixin style1 {  // 무엇을 하는지 알 수 없음
								  // ...
								}

@include - 믹스인 사용

@include는 정의한 믹스인을 불러와 사용할 때 사용하는 키워드입니다.
어디에서, 어떤 순서로 믹스인을 포함시키는지에 따라 최종 스타일이 달라질 수 있으므로, 기본 사용법과 함께 여러 믹스인을 조합하는 패턴도 함께 익혀 두면 좋습니다.

기본 문법

@include 뒤에 믹스인 이름을 씁니다.

								@mixin button-style {
								  padding: 8px 16px;
								  background: #0a58ca;
								  color: #ffffff;
								}

								.button {
								  @include button-style;
								}

								.button {
								  padding: 8px 16px;
								  background: #0a58ca;
								  color: #ffffff;
								}

@include를 사용하면 믹스인에 정의된 모든 스타일이 해당 위치에 삽입됩니다.

여러 믹스인 함께 사용

하나의 선택자에서 여러 믹스인을 함께 사용할 수 있습니다.

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

								@mixin card-shadow {
								  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
								}

								.card {
								  @include flex-center;
								  @include card-shadow;
								  padding: 16px;
								}

								.card {
								  display: flex;
								  justify-content: center;
								  align-items: center;
								  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
								  padding: 16px;
								}

여러 믹스인을 사용하면 작은 단위의 믹스인을 조합하여 복잡한 스타일을 만들 수 있습니다.

믹스인과 일반 속성 함께 사용

믹스인과 일반 속성을 함께 사용할 수 있습니다.
믹스인을 먼저 작성하고 그 아래에 일반 속성을 추가하거나, 반대로 일반 속성을 먼저 작성하고 믹스인을 나중에 사용해도 됩니다.

SCSS에서는 믹스인과 일반 속성의 선언 순서에 대한 규칙이 없습니다.
다만 코드의 가독성과 유지보수를 위해, 개인 또는 팀 단위로 일관된 순서를 정하는 것이 좋습니다.
일반적으로는 믹스인을 먼저 배치하고 그 아래에 개별 속성을 작성하는 방식을 많이 사용합니다.

								@mixin button-base {
								  padding: 8px 16px;
								  border-radius: 4px;
								}

								.button {
								  @include button-base;
								  background: #0a58ca;  // 추가 속성
								  color: #ffffff;       // 추가 속성
								}

이렇게 하면 공통 스타일은 믹스인으로, 개별 스타일은 직접 작성할 수 있습니다.

@content - 동적 콘텐츠 삽입

@content는 믹스인을 사용할 때 추가 스타일을 삽입할 수 있게 해주는 기능입니다.
반응형 레이아웃이나 상태별 스타일처럼 “틀은 같지만 안의 내용이 달라지는 패턴”을 유연하게 재사용할 수 있게 해 주는 중요한 문법입니다.

@content 기본 사용법

믹스인 내부에 @content를 작성하면, @include 사용 시 추가 스타일을 삽입할 수 있습니다.

								// @content를 사용하는 믹스인
								@mixin responsive($breakpoint) {
								  @media (min-width: $breakpoint) {
								    @content;  // 여기에 추가 스타일이 삽입됨
								  }
								}

								.container {
								  width: 100%;

								  @include responsive(768px) {
								    max-width: 720px;  // 이 스타일이 @content 위치에 삽입됨
								    margin: 0 auto;
								  }
								}

								.container {
								  width: 100%;
								}

								@media (min-width: 768px) {
								  .container {
								    max-width: 720px;
								    margin: 0 auto;
								  }
								}

@content를 사용하면 믹스인 내부에 동적으로 스타일을 추가할 수 있어 매우 유연합니다.

@content 활용 예시

@content는 미디어 쿼리, 호버 효과, 포커스 효과 등에서 자주 사용됩니다.

								// 호버 효과 믹스인
								@mixin hover {
								  &:hover {
								    @content;
								  }
								}

								// 포커스 효과 믹스인
								@mixin focus {
								  &:focus {
								    @content;
								  }
								}

								.button {
								  background: #0a58ca;

								  @include hover {
								    background: #084298;  // 호버 시 배경색 변경
								  }

								  @include focus {
								    outline: 2px solid #0a58ca;  // 포커스 시 아웃라인 추가
								  }
								}

								.button {
									background: #0a58ca;
								}
								.button:hover {
									background: #084298;  // 호버 시 배경색 변경
								}
								.button:focus {
									outline: 2px solid #0a58ca;  // 포커스 시 아웃라인 추가
								}

믹스인 중첩 사용

믹스인은 다른 믹스인 안에서도 사용할 수 있습니다.
작은 단위의 믹스인을 조합하여 더 큰 믹스인을 만들 수 있습니다.

							// 작은 단위의 믹스인
							@mixin flex {
								display: flex;
							}

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

							// 두 믹스인을 조합
							@mixin flex-center {
								@include flex;
								@include center;
							}

							.container {
								@include flex-center;
							}

이렇게 하면 작은 단위의 믹스인을 재사용하여 더 복잡한 믹스인을 만들 수 있습니다.

실제 사용 예시

기본 문법을 활용한 실제 사용 예시를 살펴봅니다.

버튼 컴포넌트 예시

믹스인을 사용하여 버튼 컴포넌트를 구성하는 예시입니다.

								// 기본 버튼 스타일
								@mixin button-base {
								  padding: 8px 16px;
								  border-radius: 4px;
								  font-weight: 700;
								  cursor: pointer;
								  border: none;
								}

								// Primary 버튼
								.button-primary {
								  @include button-base;
								  background: #0a58ca;
								  color: #ffffff;

								  &:hover {
								    background: #084298;
								  }
								}

								// Secondary 버튼
								.button-secondary {
								  @include button-base;
								  background: #6c757d;
								  color: #ffffff;
								}

카드 컴포넌트 예시

여러 믹스인을 조합하여 카드 컴포넌트를 구성하는 예시입니다.

								@mixin card-base {
								  background: #ffffff;
								  border-radius: 8px;
								  padding: 16px;
								}

								@mixin card-shadow {
								  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
								}

								.card {
								  @include card-base;
								  @include card-shadow;
								  margin-bottom: 24px;
								}

반응형 레이아웃 예시

@content를 사용하여 반응형 레이아웃을 구성하는 예시입니다.

								@mixin tablet {
								  @media (min-width: 768px) {
								    @content;
								  }
								}

								@mixin desktop {
								  @media (min-width: 1024px) {
								    @content;
								  }
								}

								.container {
								  width: 100%;

								  @include tablet {
								    max-width: 720px;
								    margin: 0 auto;
								  }

								  @include desktop {
								    max-width: 1140px;
								  }
								}

정리

@mixin과 @include 기본 문법에 대해 알아본 내용을 정리합니다.

@mixin: 믹스인을 정의할 때 사용, 믹스인 이름 뒤에 중괄호로 스타일 작성
@include: 정의한 믹스인을 불러와 사용할 때 사용
여러 믹스인 사용: 하나의 선택자에서 여러 믹스인을 함께 사용 가능
@content: 믹스인 사용 시 추가 스타일을 동적으로 삽입
믹스인 중첩: 믹스인 안에서 다른 믹스인 사용 가능
활용 예시: 버튼, 카드, 반응형 레이아웃 등에서 활용

다음 페이지에서는 파라미터가 있는 믹스인에 대해 자세히 알아봅니다.