[React 따라하기 #15] React sass @mixin

@mixin 과 @include

css 의 프로퍼티들의 묶음이라고 보면될거같습니다.

예를 들어 scss 에서 

@mixin tab-text{
  color: red;
  font-size: 20px;
  font-weight: bold;
  background-color: gray;
}

이렇게 정의하고 

사용할 때는 @include 를 사용합니다.

.tab_select {
  @include tab-text;
  background-color: green;
}

이렇게 사용합니다. 

css로 변환되면 아래와 같이 됩니다.

.tab_select {
  color: red;
  font-size: 20px;
  font-weight: bold;
  background-color: gray;
  background-color: green;
}

 

중복되는 css 속성을 @mixin 으로 정의해놓고
여기저기서 @include tab-text; 로 사용할 수 있습니다.

변경도 @mixin 의 정의 부분만 변경하면 한번에 다 변경되겠지요.

 

mixin 안에 다른 mixin 을 include 할 수 있습니다.

@mixin tab-text{
    @include enable-color;
    @include select-border;
}

 

 

mixin 에 파라메터를 넘길 수 도 있습니다.

/* 선언 */
@mixin tab-text($color, $size: 13px){
  color: $color;
  font-size: $size;
}

/* 사용 */
.tab_on {
  @include tab-text(green, 20px);
}

.tab {
  @include tab-text($color: black);
}

파라메터 기본값 : 선언 할때 두번째 파라메터인 $size 는 기본값이 13px 입니다.

.tab { } 에서 tab-text 에 파라메터 하나만 넘길때는 파라메터명을 명시해줘야 합니다.