[Sass] @mixin 문법 사용 방법

 

▶ 기본적으로 @extend와 비슷하나 @mixin을 이용하면 특정 요소만 바꿀 수 있다.

 

 

1. .scss파일에서 @mixin을 이용해 원하는 이름으로 작명하여 공통 코드를 작성한다.

@mixin 작명() { 공통 코드 }

 

▶ 여기서 () 안에 특정한 요소를 $로 지정하면 나중에 코드에 넣을 때 $부분을 다르게 줄 수 있다.

 

@mixin 색깔($버튼색깔){

    background-color: $버튼색깔;

}

 

 

2. @include을 이용해 1에서 만든 것을 이용하여 공통 코드 부분을 넣어준다.

@inlcude 작명();

 

    @include 색깔($초록);

 

 

▶ $는 여러개 사용가능하고 왼쪽에 넣을 수도 있다.