CSS의 전처리기 css인 SCSS에서 자주 사용되는 @mixin 그리고 @inclue에 대하여 알아보려고 합니다.

@mixin
@include

이 둘은 sass, scss에서 자주 볼 수 있는데요 어떻게 그리고 언제 사용하는지 알아봅니다.

# @mixin @include 알아보기

먼저 두 가지 @mixin와 @include는 항상 함께 사용되며 @mixin을 사용하면 그룹단위의 스타일을 변수처럼 적용할 수 있습니다. 즉 여러개의 스타일을 설정해두었다가 한번에 적용하는 것이 가능합니다. 이때 설정에는 @mixin을 그리고 사용할 때는 @include를 사용하면 됩니다. 아래 코드를 봐주세요.

@mixin box-default {
padding: 20px 30px;
margin-bottom: 20px;
}

위에서는 @mixin을 사용해 box-default라는 이름을 가진 스타일 그룹을 설정했습니다. 이제 원하는 곳에 box-default를 사용하면 padding과 margin값을 동시에 적용하게 됩니다. 이제 위 스타일을 div 태그에 적용해보겠습니다.

div {
@include box-default
}

이처럼 div태그에 적용하면 아래와 같이 box-default의 모든 스타일 속성을 가지게 됩니다.

div {
padding: 20px 30px;
margin-bottom: 20px;
}

이처럼 @mixin을 사용하여 미리 선언해두면 동일한 레이아웃 등의 스타일 지정에 매우 편리합니다. 만약 스크롤바의 스타일을 항상 정해진 스타일로 보이고 싶은 경우에도 위와 같이 @mixin을 사용해 선언할 수 있을 것입니다.

@mixin scrollbar-default {
::-webkit-scrollbar {
width: 10px;
height: 20px
}
::-webkit-scrollbar-track {
background-color: darkblue;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
background-color: black;
}
}

위 스크롤바를 적용하려면 아래와 같이 간단하게 @include를 사용하면 됩니다.

div {
@include scrollbar-default
}

이처럼 @mixin과 @include를 잘 사용하면 매우 편리합니다.

! mixin에 조건문 사용하는 방법 if, else

mixin은 전달 받은 인자를 사용하여 조건문 @if, @else를 사용할 수 있습니다. 예를들어 폰트 사이즈를 키우거나 줄이기 위해 아래와 같이 각각 다른 mixin을 구현할 수 있죠.

mixin fontSize($size) {
@if $size == 'small' {
font-size: 10px;
}
@else if $size == 'large' {
font-size: 14px;
}
@else {
font-size: 12px;
}
}

이제 각각 큰 폰트, 기본 폰트, 작은 폰트를 구현하기 위해서 아래와 같이 사용할 수 있습니다.

div {
@include fontSize('small');
@include fontSize;
@include fontSize('large');
}

이처럼 mixin과 if 조건문을 조합해 사용하면 다양한 스타일을 간단하게 얻는 것이 가능합니다.

! @content 블럭 사용하는 방법

만약 기존의 @mixin 내부의 스타일을 추가하거나 변경하려면? 이때 @content를 사용할 수 있습니다. @content를 사용하면 @include 내부에 선언된 블럭을 함께 사용할 수 있습니다.

@mixin box-default {
padding: 20px 30px;
margin-bottom: 20px;
@content;
}

이제 @include에 스타일 블럭을 추가해봅니다.

div {
@include box-default {
padding: 40px 60px;
}
}

이처럼 간단하게 추가 스타일을 선언해 사용할 수 있습니다.

! @mixin에 인자 arguments를 사용하는 방법

여기서 @mixin의 특징으로 인자를 사용하여 함수처럼 사용할 수 있다는 점입니다. 만약 위의 box-default의 padding 값을 상황에 따라 다르게 주고 싶다면? 아래와 같이 사용할 수 있습니다.

@mixin box-default($padding, $margin) {
padding: $padding;
margin-bottom: $margin;
}

이제 box-default에 padding과 margin 값으로 각각 20px, 30px을 주려면 아래처럼 선언합니다.

div {
@include box-default(20px, 30px);
}

이제 div 태그는 padding과 margin-bottom 값이 각각 20px, 30px으로 선언될 것입니다. 이처럼 코드를 @mixin에 인자를 사용하여 선언해두면 코드의 재사용성을 높일 수 있을 것입니다.

참고로, 인자가 없는 경우... 즉 기본값을 설정할 수 있습니다. 이 방법은 아래에서 확인해보세요.

! 기본값 선언하여 사용하기

추가로 인자의 기본값을 선언하는 것도 가능합니다. 아무 값도 입력되지 않은 경우 각각 10px, 20px로 선언해보겠습니다.

@mixin box-default($padding: 10px, $margin: 20px) {
padding: $padding;
margin-bottom: $margin;
}

이제 값이 없어도 기본값이 적용되어 나타납니다.