다음과 같은 html이 있다고 해보자.

    <div class="container">
        <div class="item">
            Mixin!
        </div>
    </div>

다음과 같이 SCSS파일을 준비하자.

SCSS에서 재활용은 @mixin 이라는 키워드를 이용한다.

@mixin center {
  dispaly: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include center;
  .item {
    @include center;
  }
}

.box {
  @include center;
}

위의 예제를 보자마자 느낌이 올 것이다.

@mixin 이라는 키워드로 자주 사용할 스타일을 변수화한다.

@include 라는 키워드로 이름이 정해진 변수화된 스타일을 지정해 재사용할 수 있다.

더 놀라운건 이게 끝이 아니다.

매개변수

@mixin 문법에는 매개변수를 사용할 수도 있다.

@mixin center($backgroundColor) {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $backgroundColor;
}

.container {
  @include center(royalblue); //함수처럼 사용한다.
  .item {
    @include center(orange);
  }
}
.box {
  @include center(red);
}

심지어 JS처럼 기본값을 줄 수도 있다.