Sass @mixin 과 @include 사용하기

 

 

@mixin 은 Sass 언어 전체에서 가장 많이 사용되는 기능 중 하나이며, 재사용성과 DRY(반복을 하지 마라) 컴포넌트의 핵심이다.

 

버튼, 아이콘 등을 Class로 만들어 놓고 필요한 태그 스타일링에 따라 클래스를 추가로 넣어주는 경우가 있었는데 @mixin 을 사용하면 이러한 부분들을 손쉽게 반복적인 작업을 할 수 있다.

 

mixin 을 선언할 때는 @mixin 지시자를 사용하며, 적용 시 @include  지시자를 사용한다. 

 

선언 및 적용

Sass

// 버튼 스타일링

// @mixin 선언
@mixin button {
  border-color: #eaeaea;
  border-width: 1px;
  cursor: pointer;
  padding: 0.75em 1em;
  height: 50px;
  text-align: center;
  white-space: nowrap;
  border-radius: 100px;
}

// 버튼 mixin을 include한 후, background-color 지정
.is-primary {
  // @mixin 선언 한 것을 @include 로 적용
  @include button;
  
  background: #00bff0;
}

 

위의 Sass를 컴파일한 결과는 아래와 같다.

 

CSS

.is-primary {
  border-color: #eaeaea;
  border-width: 1px;
  cursor: pointer;
  padding: 0.75em 1em;
  height: 50px;
  text-align: center;
  white-space: nowrap;
  border-radius: 100px;
  background: #00bff0;
}

 

@mixin 은 함수와 같이 인수 사용 가능하다.

@mixin rounded ($radius: 10px) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

// 아무 것도 인수를 넘기지 않을 시 @mixin rounded에 $radius의 초기값은 10px로 설정 된다.
.box-wrap {
  @include rounded();
}

// 인수를 넘기면 @mixin rounded에 $radius는 넘긴 인수 값에 맞게 값이 설정 된다.
.menu-box-wrap {
  @include rounded(5px);
}

만약 $radius에 초기값을 설정 안 한 후 include에 인수 값을 넣지 않으면 에러가 발생하니 조심하자!

 

이것을 조금 더 활용하여 사용해보자!

다음은 브라우저 호환을 위해 transition 을 아래와 같이 설정을 하였다.

.move-button {
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition:all 0.3s;
  transition: all 0.3s;
}

 

이것을 우리가 위에서 배웠던 @mixin 을 활용하여 사용해보자

@mixin transition($transition...) {
  -moz-transition: $transition;
  -o-transition: $transition;
  -webkit-transition: $transition;
  transition: $transition;
}

.move-button {
  @include transition(all 0.3s);
}

 

이것을 @each(list 요소 반복)으로 조금 간단하게 사용할 수 있다. 

@mixin transition($time) {
  @each $prefix in -moz-, -o-, -webkit-, '' {
    #{$prefix}transition: $time;
  }
}

.move-button {
  @include transition(0.3s);
}

 

이 얼마나 간단한가!

Sass에서 자주 사용하는 @mixin 과 @include 에 대해 알아보았다.

예전 방식인 class를 지양하고 @mixin 과 @include 를 사용하는 것을 추천한다.

 

감사합니다.

오늘도 해피 코딩하세요.