CSS 후처리기 - PostCSS

PostCSS

PostCSS는 CSS 전처리기 중 하나로 알려져 있는데, 정확히는 동작 순서에 따라 CSS 후처리기(CSS Post-processor)가 맞다. 따라서, 한 프로젝트에 SCSS 같은 전처리기와 함께 사용할 수 있다. Sass, LESS, Stylus 등의 CSS 전처리기는 CSS가 생성되기 전에 각자 고유의 파일 확장자를 가진다(*.scss, *.less, *.styl). 그 후, 생성된 파일이 컴파일을 통해 CSS로 변환된 후에 PostCSS에 의해 최종 변환된다.

 

PostCSS의 장점

• 모듈식 사용: 필요한 플러그인만 찾아서 사용하면 되기 때문에 속도가 빠르다. (https://www.postcss.parts/)
• JavaScript 기반: 필요한 플러그인을 직접 개발할 수 있다.
• CSS 표준 문법 기반: CSS와 문법이 같기 때문에 별도의 문법 공부가 필요 없다.
• npm을 통한 설치: Vue.js나 React.js 등 프레임워크에서 활용이 쉽다.

 

PostCSS의 단점

• Sass에 비해 문법이 약하다.
• 플러그인 의존도가 높다(PostCSS는 플러그인을 연결해주는 역할만 하기 때문에 원하는 플러그인이 있을 때마다 설치해야 함).
• 플러그인의 지원이 중단될 수 있다.

 

 

인기 있는 PostCSS 플러그인

autoprefixer

-webkit- 등의 prefix를 자동으로 넣어주는 플러그인이다.

// 변환 전
.box {
  display: flex;
}

// 변환 후
.box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

 

postcss-modules-values

// colors.css (변수를 할당할 파일)
// @value (key): (value); 형식으로 변수 할당
 
@value markBlack: black;
@value markWhite: white;
@value markDarkWhite: #f5f5f3;

// index.module.css
 
@value markBlack from './common/colors.css';
@value markWhite from './common/colors.css';
 
.container {
  background-color: markBlack;
  color: markWhite;
}

 

postcss-color-function

밝기를 조정하는 color modifier다.

// 변환 전
a {
  color: color(red lightness(+10%));
}

// 변환 후
a {
  color: rgb(255, 51, 51);
}

 

postcss-nesting

중첩(nested) 구조를 사용할 수 있으나, Sass에서 기본 지원된다. 조만간, 기본 CSS에도 추가될 것이라고 하니 참고만 하자.

 

postcss-for

for 반복문을 사용할 수 있는 플러그인이다.

 

 

PostCSS 공식 웹 사이트

https://postcss.org/

PostCSS - a tool for transforming CSS with JavaScript