flexbox 중앙 정렬이나 버튼 스타일처럼 똑같은 CSS 코드 뭉치를 여러 곳에서 반복해서 치고 있진 않나요?
Mixin(믹스인)은 재사용 가능한 코드 블록을 도장처럼 만들어두고 필요할 때마다 찍어내는 기능입니다. 특히 함수처럼 인자(Argument)를 전달받을 수 있어서, 똑같은 구조지만 색상이나 크기만 다른 요소를 찍어낼 때 진가를 발휘합니다.
| 키워드 | 역할 | 사용 예시 |
|---|---|---|
| @mixin | 재사용할 스타일 블록을 정의 | @mixin flex-center { display: flex; ... } |
| @include | 정의된 믹스인을 호출하여 포함 | .box { @include flex-center; } |
| 인자 (Args) | 믹스인에 동적인 값을 전달 | @mixin button($color) { background: $color; } |
<div class="box-container">
<div class="box-small">Small Box</div>
<div class="box-large">Large Box</div>
</div>
/* SCSS Mixin 예시 */
/*
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
@mixin circle($size, $color) {
width: $size;
height: $size;
background-color: $color;
border-radius: 50%;
color: white;
@include flex-center; // Mixin 안에서 다른 Mixin 호출 가능!
}
.box-small {
@include circle(100px, #ef4444);
}
.box-large {
@include circle(150px, #3b82f6);
}
*/
/* 컴파일된 실제 CSS */
.box-container {
display: flex;
gap: 20px;
padding: 20px;
}
.box-small {
width: 100px;
height: 100px;
background-color: #ef4444;
border-radius: 50%;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.box-large {
width: 150px;
height: 150px;
background-color: #3b82f6;
border-radius: 50%;
color: white;
display: flex;
justify-content: center;
align-items: center;
}