PostCSS Plugin 소개 - PreCSS

오늘의 플러그인은 PreCSS다.

 

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

Sass에서 사용되는 $변수를 활용한 CSS를 똑같이 구현해주는 기능을 가지고 있다.

 

2. 설치법

npm을 통하여 아래와 같이 설치해주면 된다.

 - npm install precss --save-dev

 

3.  postcss.config.js 에 추가하기

4. CSS에 적용하기

우선 상단에 변수 명을 선언한 후, 값을 정해준다. 그 후, 클래스에 css 속성을 넣는다.

그후 PostCSS를 통해 하단과 같이 재생성된 CSS 결과물이 적용됩니다.