[Scss]@mixin @include

• Scss 문법 중 하나인 mixin으로 스타일을 정의해두면 함수처럼 전체 스타일 시트에서 여러번 재사용할 수 있다.
• mixin.scss 파일을 따로 만들어두고 mixin만 관리하면 더욱 편리.

기본 형식

@mixin "name"

예시

@mixin profileTxt {
  font-size: 13px;
  font-weight: bold;
}

이렇게 정의한 mixin은 아래와 같이 필요한 scss파일 내에서 import해서 사용할 수 있다.

@import "../../../styles/mixin";
.profileTxt {
  @include profileTxt;
}```

변수 포함 형식

@mixin "name"($변수명)

변화가 필요한 값들은 인자로 받아서 쓸 때마다 바꿔 사용하는 것도 가능하다.

  @mixin flex($direction, $align, $justify) {
    display: flex;
    flex-direction: $direction;
    align-items: $align;
    justify-content: $justify;
  }

.box {
      @include flex(column, center, center);
      margin: 10px auto 120px;
    }