CSS의 SASS 또는 SCSS에서 자주 사용되는 @mixin 그리고 @inclue에 대하여 알아보려고 합니다.

@mixin
@include


이 둘은 sass, scss에서 자주 볼 수 있는데요 어떻게 그리고 언제 사용하는지 알아봅니다.



# @mixin @include 알아보기
먼저 두 가지 @mixin와 @include는 항상 함께 사용되며 @mixin을 사용하면 그룹단위의 스타일을 변수처럼 적용할 수 있습니다. 즉 여러개의 스타일을 설정해두었다가 한번에 적용하는 것이 가능합니다. 이때 설정에는 @mixin을 그리고 사용할 때는 @include를 사용하면 됩니다. 아래 코드를 봐주세요.
@mixin box-default {
  padding: 20px 30px;
  margin-bottom: 20px;
}

위에서는 @mixin을 사용해 box-default라는 이름을 가진 스타일 그룹을 설정했습니다. 이제 원하는 곳에 box-default를 사용하면 padding과 margin값을 동시에 적용하게 됩니다. 이제 위 스타일을 div 태그에 적용해보겠습니다.
div {
  @include box-default
}

이처럼 div태그에 적용하면 아래와 같이 box-default의 모든 스타일 속성을 가지게 됩니다.
div {
  padding: 20px 30px;
  margin-bottom: 20px;
}

이처럼 @mixin을 사용하여 미리 선언해두면 동일한 레이아웃 등의 스타일 지정에 매우 편리합니다. 만약 스크롤바의 스타일을 항상 정해진 스타일로 보이고 싶은 경우에도 위와 같이 @mixin을 사용해 선언할 수 있을 것입니다.
@mixin scrollbar-default {
  ::-webkit-scrollbar {
    width: 10px;
    height: 20px
  }
  ::-webkit-scrollbar-track {
    background-color: darkblue;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: black;
  }
}

위 스크롤바를 적용하려면 아래와 같이 간단하게 @include를 사용하면 됩니다.
div {
  @include scrollbar-default
}

이처럼 @mixin과 @include를 잘 사용하면 매우 편리합니다.


! @mixin에 인자 arguments를 사용하는 방법
여기서 @mixin의 특징으로 인자를 사용하여 함수처럼 사용할 수 있다는 점입니다. 만약 위의 box-default의 padding 값을 상황에 따라 다르게 주고 싶다면? 아래와 같이 사용할 수 있습니다.
@mixin box-default($padding, $margin) {
  padding: $padding;
  margin-bottom: $margin;
}

이제 box-default에 padding과 margin 값으로 각각 20px, 30px을 주려면 아래처럼 선언합니다.
div {
  box-default(20px, 30px);
}

이제 div 태그는 padding과 margin-bottom 값이 각각 20px, 30px으로 선언될 것입니다. 이처럼 코드를 @mixin에 인자를 사용하여 선언해두면 코드의 재사용성을 높일 수 있을 것입니다.


! 기본값 선언하여 사용하기
추가로 인자의 기본값을 선언하는 것도 가능합니다. 아무 값도 입력되지 않은 경우 각각 10px, 20px로 선언해보겠습니다.
@mixin box-default($padding: 10px, $margin: 20px) {
  padding: $padding;
  margin-bottom: $margin;
}

이제 값이 없어도 기본값이 적용되어 나타납니다.