PostCSS Plugin 소개 - easings

오늘 소개할 플러그인은 postcss-easings 라는 플러그인이다.

이름에서부터 CSS easing과 관련된 플러그인임을 알 수 있다.

 

1. 어떤 기능을 가지고 있는가?

PostCSS plugin to replace easing name from easings.net to cubic-bezier().

github.com/postcss/postcss-easings에 적혀있는 본문은 위와 같고, 번역을 간단히 해보면

CSS transition을 easing.net에 있는 easing 이름으로 활용할 수 있다. 라고 되어있다.

혹은, 본인이 스스로 cubic-beizer를 만들어서 사용해도 된다.

 

2. 설치

npm으로 설치하면 된다.

 - npm i postcss-easings

 

3. easing.net의 속성을 가져와서 적용하기.

easing.net에 정의된 속성을 가져와서 활용하는 방법이다.

우선 postcss-easing을 postcss.config.js에 추가하도록 한다.

상단은 autoprefixer 플러그인과 같이 사용된 상태이다. 그 후 CSS를 생성하도록 한다.

최종적으로 적용된 CSS는 아래와 같다.

4. 본인이 속성을 생성하여 적용하기.

위와 같이 postcss.config.js에 이름 및 cubic-bezier 값을 추가해준다. 그 후 아래와 같이 CSS 파일에도 추가.

최종적으로 적용된 CSS는 아래와 같다.