처음으로 PostCSS
사용해 보았으므로 정리해 보았습니다.

PostCSS란?

Node.js 시스템,
CSS 도구를 만들기 위한 프레임워크입니다.

PostCSS의 작동 방식

PostCSS 자체는 단지 파서이며,
CSS를 받고 구문 분석하여 ART를 생성하는 역할을 수행합니다.

PostCSS를 사용하는 이점

① 일련의 CSS 빌드 플로우를 간결화

빌드하고 ~하고,
PostCSS 에코시스템으로 모두 해결할 수 있습니다.

②PostCSS 플러그인을 사용하여 사용자 정의 가능

Custom Syntaxes 이라는 기능을 사용함으로써,
자신이 원하는 기능만 사용자 정의할 수 있습니다.
이 커스터마이징이 PostCSS의 가장 큰 특징이라면
나 자신은 느낀다.
아래에서 플러그인 당 쓰기 방법을 살펴 보겠습니다

PostCSS의 주요 쓰기

환경

빌드 도구는 gulp을 사용합니다.
Node.js v8.11.2
gulp v3.9.1

①변수로 취급

postcss-custom-properties을 설치하면,
Sass 기법과 같이 변수 정의를 할 수 있게 됩니다.
아래와 같이, :root 내에서 정의 가능합니다.

② 중첩으로 CSS 작성

postcss-nested을 설치하면,
중첩으로 작성할 수 있습니다.

③CSS 파일을 복수로 분할

postcss-import을 설치하면,
중복 CSS 파일을 여러 개로 분할
각각 읽을 수 있습니다.

아래에서는 color-css와 btn-css라는 파일
style.css에서 import하고 있습니다.
style.css

요약

Sass를 평소부터 사용하고 있기 때문에
매우 쉬워졌습니다 ☺

플러그인의 선정은 아래에서도 가능합니다.
자신에게 맞는 플러그인을 선택하는 데 도움이됩니다

PostCSS.parts: htps //w w. Postcs. 파 rts/

PostCSS Plugins: htps : // 기주 b. 이 m/포 stcs s/포 stcs s/bぉb/마s r/도 cs/p㎅진 s. md