scss animation mixin

css처럼 애니메이션을 바로 사용하게 된다면 scss에서는 문제가 발생한다. 이유는 애니메이션의 name이 바뀐다! 만일 animation이름을 fadeOut이라는 이름을 SnackBar에서 사용하면 애니메이션이름은 다음과 같이 바뀐다

.Snackbar_wrapper{
  animation-name: Snackbar_fadeOut__uuidexample;

}

scss에서는 애니메이션을 제외하고는 이름의 중복을 피해주는 sass 덕분에 편리하지만, 애니메이션에서 mixin을 사용하지 않으면 상당히 불편하다. 그래서 다음과 같은 mixin을 작성하였다.

mixin

@mixin animate($animation, $duration, $method, $times) {
  animation-name: $animation;
  animation-duration: $duration;
  animation-timing-function: $method;
  animation-iteration-count: $times;
}

 

 

이 mixin은 다음과 같이 사용할 수있다.

사용 예시

.example {
  @include animate(animationname, 1s, linear, infinite);
}

@keyframes animationname {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}