Sass의 @mixin 사용법

1.@mixin의 기본 사용법

Sass에서는 완전히 동일한 값을 @mixin을 사용하여 객체처럼 묶어 사용 할 수 있다.

<-- @mixin 미사용 -->
.mainFont{
color : red;
font-size : 12px;
font-weight : bold;
font-style : normal;
background-color : blue;
}

.subFont{
color : Red;
font-size : 12px;
font-weight : bold;
font-style : normal;
background-color : blue;
}

<-- 위와 같이 완전히 동일한 값을 @mixin으로 묶어 사용이 가능하다 -->

<-- @mixin 사용 -->
@mixin basicFont{
color : red;
font-size : 12px;
font-weight : bold;
font-style : normal;
background-color : blue;
}

.mainFont{
@include basicFont;
}

.subFont{
@include basicFont;
}

<-- 이와 같이 @include를 통해 선언한 @mixin을 호출하여 @mixin의 값을 사용할 수 있다.   -->

2.@mixin의 인자

@mixin은 함수와 같이 인자를 취할 수 있는데 아래와 같이 사용한다.

@mixin basicFont($fontColor){
color : $fontColor;
font-size : 12px;
font-weight : bold;
font-style : normal;
background-color : blue;
}
.mainFont{
@include basicFont(black);
}
.subFont{
@include basicFont(white);
}
<-- 위와 같이 인자를 넣어 사용할 수 있으며 인자의 갯수 제한은 없다.-->

3.@mixin 인자의 초기값

@mixin의 인자에 기본값을 지정 할 수 있는데 아래와 같이 사용한다.

@mixin basicFont($fontColor , $backgroundColor : gray){
color : $fontColor;
font-size : 12px;
font-weight : bold;
font-style : normal;
background-color : $backgroundColor;
}
.mainFont{
@include basicFont(black,white);
}
<-- mainFont에선 2번째 인자에 값을 넣었기 때문에 background-color가 white로 출력된다. -->
.subFont{
@include basicFont(white);
}
<-- subFont에선 2번째 인자에 값을 넣지 않았기 때문에 -->
<-- background-color가 초기값으로 설정한 gray로 출력된다.-->