[Sass] 4장 믹스인(Mixin) 생성 및 사용

728x90

1. Sass Mixin이란?

Sass 믹스인은 공통된 스타일을 재사용할 수 있게 만드는 기능으로 함수처럼 매개변수도 받을 수 있습니다.

// 1. 믹스인 정의
@mixin mixin이름 {
  속성: 값;
  ...
}

// 2. 믹스인 사용
.클래스명 {
  @include mixin이름;
}

2. 사용 예제

기본 믹스인

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

.box {
  width: 100px;
  height: 100px;
  background: #34948b;
  @include center-box;
}

출력 결과

.box {
  width: 100px;
  height: 100px;
  background: #34948b;
  display: flex;
  justify-content: center;
  align-items: center;
}

3. 파라미터가 있는 믹스인

Parameter-Mixin.scss

@mixin rounded($radius) {
  border-radius: $radius;
}

.button {
  padding: 10px 20px;
  background: tomato;
  color: #fff;
  @include rounded(15px);
}

index.html

<button class="button">
  Parameter Mixin
 </button>

4. 기본값이 있는 파라미터 믹스인

Default-Paramter-Mixin.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Default-Parameter-Mixin</title>
    <link rel="stylesheet" href="Default-Parameter-Mixin.css" />
  </head>
  <body>
    <p class="text-default">기본 폰트</p>
    <p class="text-custom">커스텀 폰트</p>
  </body>
</html>

Default-Paramter-Mixin.scss

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

.text-default {
  @include font; // 기본값 적용
}

.text-custom {
  @include font(20px, bold); // 사용자 정의 값 적용
}

5. 조건 처리 믹스인 (@if, @else)

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>if-else Mixin</title>
    <link rel="stylesheet" href="if-else-Mixin.css" />
  </head>
  <body>
    <div class="card-light">라이트 테마</div>
    <div class="class card-dark">다크 테마</div>
    <div class="card-unknown">기타 테마</div>
  </body>
</html>

if-else-Mixin.scss

@mixin theme($mode) {
  @if $mode == "dark" {
    background-color: white;
    color: black;
  } @else if $mode == "light" {
    background-color: black;
    color: white;
  } @else {
    background: gray;
    color: white;
  }
}

.card-light {
  @include theme(light);
  padding: 20px;
}

.card-dark {
  @include theme(dark);
  padding: 20px;
}

.card-unknown {
  @include theme(unknown);
  padding: 20px;
}

6. @content 믹스인

Content-Mixin.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content-Mixin</title>
    <link rel="stylesheet" href="Content-Mixin.css" />
  </head>
  <body>
    <div class="card1">Custom Style 1</div>
    <div class="card2">Custom Style 2</div>
  </body>
</html>

Content-Mixin.scss

@mixin card {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  background: #f9f9f9;
  @content; // 사용자 정의 내용 삽입;
}

.card1 {
  @include card {
    color: #333;
    font-weight: bold;
  }
}

.card2 {
  @include card {
    color: #666;
    font-style: italic;
  }
}

GitHub - Koras02/sass-bloging: https://thinky.tistory.com/category/Front-End/SASS

https://thinky.tistory.com/category/Front-End/SASS - Koras02/sass-bloging

github.com

728x90

LIST

'Front-End > SASS' 카테고리의 다른 글

[Sass] 5장 상속(Inheritance) 사용법 (0)	2025.09.03
[Sass] 3장 Nesting (0)	2025.03.27
[Sass] 2장 기본 문법 - Sass 변수 사용법 (0)	2025.03.25
[Sass] 1장 Sass란? (0)	2025.03.09