PostCSS 소개

7 min readApr 8, 2017

JS로 Transcompile되는 CoffeeScript나 TypeScript같이, CSS를 편하게 작성하기 위한 새로운 문법 역시 지속적으로 제시되어왔다. Sass가 있었고, less, stylus도 있다. 그중 가장 최근에 등장한 PostCSS를 알아보자.

누군가는 (해리포터와) 죽음의 성물을 누군가는 일루미나티를 떠올렸다는 PostCSS 로고

PostCSS란 무엇인가

PostCSS는 JS 플러그인을 사용하여 CSS를 변환시키는 툴입니다. 이런 플러그인을 사용하여 lint, 변수, mixin을 사용하거나, 인라인 이미지 또는 미래의 CSS 문법을 사용할 수 있습니다. (링크)

이 문장을 주의깊게 살펴봐야 한다. PostCSS를 사용하여가 아니라 플러그인을 사용하여라고 표현했다. 다시 한 번 위키피디아를 들여다보자.

PostCSS는 자바스크립트 기반의 플러그인을 사용하여 CSS 기능을 자동화하는 소프트웨어 개발 도구입니다. (링크)

Sass나 less는 “CSS로 변환되는 스타일 시트 언어”라고 표현하는 것과 확연한 차이점이 있다.

그렇다. PostCSS는 언어가 아니다. 도구일 뿐이다.

비유하자면, CSS 전용 Gulp라고 하겠다. 아니, Babel에 더 가까울지도?

PostCSS로 무엇을 할 수 있는가?

질문이 잘못되었다. PostCSS 플러그인으로 무엇을 할 수 있는가? 라고 질문해야 옳다. PostCSS 자체는 아무 일도 하지 않는다. 다만 다양한 플러그인과, 플러그인을 추가할 수 있는 환경을 제공할 뿐이다. 그러니까 PostCSS로 무엇을 할 수 있는지 알고 싶다면, 질문을 다음과 같이 바꿔보자.

PostCSS 플러그인에는 어떤 것들이 있는가?

PostCSS 플러그인 리스트에는 270여개에 달하는 플러그인들이 소개되어있다. 이 중 내가 사용중인 몇몇 플러그인을 소개해보자면-

autoprefixer -webkit- 등의 prefix 없이 스타일을 지정할 수 있게 도와준다.

a {
    display: flex;
}/* result */
a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

postcss-color-function (참고) color modifier를 사용할 수 있게 해준다.

a {
  color: color(red lightness(+10%));
}/* result */
a {
  color: rgb(255, 51, 51);
}

postcss-custom-properties (참고) CSS에서 변수를 사용할 수 있게 해 준다.
Sass 형식의 변수 선언을 원한다면, postcss-simple-vars 를 사용하자.

:root {
  --color: red;
}

div {
  color: var(--color);
}/* result */
div {
  color: red;
}

postcss-apply (참고) postcss-custom-properties의 확장, deprecated 될 예정이다.

:root {
  --link: {
    color: pink;
    text-decoration: underline;
    cursor: pointer;
  }
}a.move {
  @apply --link;
}/* result */
a.move {
  color: pink;
  text-decoration: underline;
  cursor: pointer;
}

postcss-import (참고) CSS @import 룰을 사용할 수 있게 해 준다.

/* foo.css */
.foo {
  width: 100px;
}
/* bar.css */
.bar {
  height: 20px;
}/* index.css */
@import "foo.css";
@import "bar.css";/* result of index.css */
.foo {
  width: 100px;
}
.bar {
  height: 20px;
}

postcss-nesting (참고) nesting 문법을 사용할 수 있게 해 준다.

a, b {
  color: red;
  & c, & d {
    color: white;
  }
  &:hover {
    color: black;
  }
  @nest div > & {
    color: blue;
  }
}/* result */
a, b {
  color: red;
}
a c, a d, b c, b d {
  color: white;
}
a:hover, b:hover {
  color: black;
}
div > a, div > b {
  color: blue;
}

postcss-for CSS 내에서 for 문을 사용할 수 있게 해 준다.

@for $i from 1 to 3 {
    .icon-$(i) { background-position: 0 calc($(i) * 20px); }
}/* result */
.icon-1 { background-position: 0 calc(1 * 20px); }
.icon-2 { background-position: 0 calc(2 * 20px); }
.icon-3 { background-position: 0 calc(3 * 20px); }

postcss-assets url() 내에 들어가는 파일의 경로를 편리하게 작성하거나, 이미지의 사이즈를 측정하고 가져올 수 있게 도와준다.

/* with loadPath settings */
body {
  background: resolve('bg.png');
}
.warn {
  width: width('warn.png'); /* calculate image size */
  background: resolve('warn.png');
}/* result */
body {
  background: url('/images/bg.png');
}
.warn {
  width: 320px;
  background: url('/images/template/warn.png');
}

이 외에도 Grid 레이아웃을 을 쉽게 작성하거나, 편리한 문법을 제공하거나, 웹사이트에 트롤짓을 할 수도 있다.

그러니까, CSS 문법을 (브라우저에서 동작 가능한 CSS로 변환시킬 수 있는 범위 내에서) 입맛에 맞게 확장시킬 수 있다. 당신이 원하는 만큼!

하지만 경험적으로 볼 때, PostCSS 및 플러그인 개발자들의 공통된 마인드는 앞으로 표준이 될 CSS 문법을 확장/지원하는 CSS계의 Babel의 역할을 하고자 한다는 느낌이 들었다. 때문에 Sass같은 문법의 변형을 지원하는 플러그인도 적고, standard가 될 가능성이 사라진 기능이라면 플러그인이 deprecated되기도 한다.

지금 쓰는 Sass나 less에서 옮겨가기 힘들 것 같아요

그 문법 그대로 사용하면서 PostCSS 플러그인을 추가해 쓸 수도 있다. PostCSS의 파서 옵션에서 해당 문법의 파서를 사용하면 된다. 안타깝게도 stylus 파서는 없지만, 비슷한 문법을 제공하는 SugarSS 파서가 있다.

설정이 복잡할 것 같아요

특정 의도를 가지고 플러그인들을 모아둔 플러그인들이 있다. cssnext는 (간단하게 말하자면) babel-esnext같은 플러그인이고, PreCSS는 Sass-like 마크업을 지원하기 위한 플러그인 모음이다.

아직 뭐가 뭔지 모르겠어요

cssnext playground에서 좌우 문법을 비교해보자. 어떤 일들이 가능한 지에 대한 느낌이 올 것이다. 더 많은 플러그인들이 존재한다는 사실을 잊지 말자.

그래서 어떻게 설치하는거죠

그건 여기에.