mixin 사용하기

1. 기본 mixin 사용법

@mixin 믹스인이름(매개변수){
	스타일 정의
}

@include 믹스인이름(매개변수);

 

mixin은 @mixin 으로 정의하고, @include로 사용된다.

 

2. mixin 예시 : 타이틀형 텍스트

@mixin text-title($weight: 700, $spacing: -0.03em){
	font-size:20px;
    line-height:36px;
    font-weight:$weight;
    letter-spacing:$spacing;
}

.textTitle01{
	@include text-title();
}

.textTitle02{
	@include text-title(500)
}

.textTitle03{
	@include text-title(400, -0.05em)
}

 

설명: mixin text-title의 경우 기본적인 스타일에서, weight와 spacing을 인자로 받는다.

 

.textTitle01의 경우 매개변수의 기본 스타일인 font-weight:700, letter-spacing: -0.03em의 스타일을 가진다.

.textTitle02의 경우 첫번째 인자인 500만을 받아, font-weight:500, letter-spacing: -0.03em의 스타일을 가진다.

.textTitle03의 경우 두개의 인자를 받아, font-weight:400, letter-spacing: -0.05em의 스타일을 가진다.

 

3. mixin 예시 : bg아이콘

@mixin bg-icon($name, $width: 20px, $height: 20px, $format: 'png'){
	width: $width;
    height: $height;
    background: url('~assets/images/icon/#{$name}.#{$format}') no-repeat 0 0;
    background-size: 100%
}

.testBgIcon01{
	@include bg-icon('icon-clear')
}

.testBgIcon02{
	@include bg-icon('icon-clear', 30px, 30px)
}

.testBgIcon03{
	@include bg-icon('icon-clear', 30px, 30px, 'jpg')
}

 

설명: mixin bg-icon의 경우 기본적인 스타일 +  name, width, height, format 을 인자로 받는다.

 

.testBgIcon01의 경우 $name의 인자 하나를 받고, 기본 스타일을 가져간다.
: 20px/20px의 크기로 '~/assets/images/icon/icon-clear.png'의 경로를 가진다.

.testBgIcon02의 경우 $name, $width, $height의 인자 3개를 받고, 매개변수의 순서에 맞게 정의된다.

: 30px/30px의 크기로 '~/assets/images/icon/icon-clear.png'의 경로를 가진다.

.testBgIcon03의 경우 $name, $width, $height, $format의 인자 4개를 받고, 매개변수의 순서에 맞게 정의된다.
: 30px/30px의 크기로 '~/assets/images/icon/icon-clear.jpg'의 경로를 가진다.