[ Scss ] Sass 함수 사용하기 (feat. css 유성효과)

여러 형제 요소가 있을 때, 각 요소의 순서에 따라 다르게 스타일링을 먹이고 싶을 때가 있었습니다. 
이럴 때 사용하면 좋은, SCSS에서 제공하는 함수에 대해 간단히 정리해보고자 합니다. 

 

먼저 HTML 코드는 아래와 같습니다.(NextJS 프레임워크를 사용했습니다.)
wrapper 안에 총 3개의 div 요소가 존재하게 됩니다.

const Home: NextPage = () => {
  const aniArray: number[] = [1, 2, 3]
  return (
    <div id="next__wrapper">
      <div className={styles.animation__wrapper}>
        {aniArray.map((el) => {
          return <div key={el} className={styles.items}></div>
        })}
      </div>
    </div>
  )
}

 

 

 

이제 어떻게 함수를 선언하고, 이 함수를 어떻게 실행 시키는지 알아봅시다.

 

 

먼저 @를 이용해서 함수를 선언합니다. 

아래 코드에서 $ 표시는 SCSS에서 변수를 선언할 때 사용하는 identifier(식별자) 입니다.

@function getDelayTime($i) {
  $totalTime: 20s;
  $beforeTime: ($i - 1) * 2s;
  @return $beforeTime;
}

 

 

이제, 이 함수를 실행 시켜 봅시다.

  .items {
    @for $i from 1 to 4 {
      &:nth-child(#{$i}) {
        animation: cometOrbit
            6s
            infinite
            getDelayTime($i)
            cubic-bezier(0.22, 0.76, 0.33, 1)
            forwards;
      }
    }
}

여기에서 함수를 실행시키는 부분은 getDelayTime($i) 부분입니다. 

물론 우리가 고정된 상수를 함수의 인자로 넘겨 줄 수도 있지만, 그렇다면 함수를 사용하는 큰 의미가 없다고 생각합니다. 

 

따라서, Sass에서 제공하는 @for(참고링크) 문을 이용하여 각각의 요소에 다른 애니메이션 delayTime을 적용시켜 봤습니다. 

 

 

 

아래 gif는 위 함수를 이용하여 간단히 구현해본 유성효과 입니다. 
총 3개의 div가 반복적으로 위에서 아래로 떨어지는 효과 입니다.

어떤 애니매이션효과로 해당효과를 구현했는지는 다음 포스트에서 정리해보도록 하겠습니다.

Scss로 간단히 구현해 본 유성 효과