scss(sass) @mixin

@mixin 어노테이션은 @include 어노테이션과 한 세트 이다. css 정의를 할때, 다른곳에서 가져다 쓸 수 있게(함수 호출처럼) 해주는 어노테이션 이다. 함수 호출 처럼 사용 할 수 있기 때문에, 키워드, 동적 인자값 전달이 가능하며, @content 로 확장 할 수도 있다. 

 

• 기본 예 ) 

@mixin test-style
{
	color : red;
    width : 10px;
}


...

test1-style
{
	@include test-style;
}

 

이런식으로 1개의 스타일을 설정한 후, 여러 스타일에서 호출하여 사용할때 사용한다. 

 

 

• 함수 호출과 동일한 방식으로, 인자값을 넘겨 줄 수도 있다. 

@mixin test-style ($colorValue, $sizeValue)
{	
	color = $colorValue;
    width = $sizeValue;
}

...

test1-style
{
	@include test-style(red, 10px);
}

 

 

• 어떤 속성값을 넣어야 할 지 모를 수 있기 때문에, 키워드를 설정 할 수 있다. 

@mixin test-style ($color, $sizeValue)
{	
	color = $colorValue;
    width = $sizeValue;
}

...

test1-style
{
	@include test-style($color:red, @sizeValue:10px);
}

 

• @content 를 통해 css를 확장하여, 추가 속성을 부여할 수있다. 

@mixin test-style ($color, $sizeValue)
{	
	color = $colorValue;
    width = $sizeValue;
    @content
}

...

test1-style
{
	@include test-style($color:red, @sizeValue:10px)
    {
    	height = 10px;
    };
}