SASS/SCSS animation keyframe (Undefined mixin 오류해결)

SassError: SassError: Undefined mixin.
    ╷
127 │       @include animation(button, 2s, 0s);
    │       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  tetris.scss 127:7  root stylesheet
    at Object.loader (C:...생략\node_modules\sass-loader\dist\index.js:69:14)
 @ ./tetris.scss 61:4-74:5 8:6-195 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-165 83:0-165 84:22-29 84:33-47 84:50-64
 @ ./tetris.ts 6:0-24

 

해결방법.

mixin 코드가 include보다 아래줄에 있으면 mixin을 읽어올 수 없어서 mixin이 undefined로 뜬다.

따라서 mixin코드를 모두 맨위로 올렸다.

 

 

 

SASS에서 keyframes, animation 사용법 예시

// mixin을 keyframe이라는 함수를 선언 name을 인자로 받아
// @keyframes를 자동으로 생성해준다. 재사용가능
@mixin keyframe($name) {
 // #{}는 템플릿 리터럴과 비슷한 역할을 한다. 인자를 쿼리명으로 받는다.
  @keyframes #{$name} {
    @content;
  }
}

// button keyframe()생성
// {}안에 들어가는 요소는 keyframe()의 @content부분에 채워진다. 
@include keyframe(button) {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

// button keyframe()를 animation-name으로 받는, mixin animation()를 생성
// 인자에 초기값을 지정해줄 수 도 있다. 재사용가능
@mixin animation($keyframe-name, $duration, $delay, $count: infinite) {
  animation-name: $keyframe-name;
  animation-duration: $duration;
  animation-delay: $delay;
  animation-iteration-count: $count;
}

//위 코드들은 최상단으로 올린다.

...
html {}
body{}
...

// 실제 button 요소에 include
button {
  @include animation(button, 2s, 0s); //$count는 초기값을 지정해줬음으로 생략가능
}

 

---

 

 

참고

Css : scss 확장기능 사용하기

SassError Undefined mixin