PostCSS (CSS 전처리기)

 

CSS 전처리기

간편한 문법과 언어(style sheet 언어)로 작성하면 순수CSS로 컴파일해주는 도구.

다른 브라우저 호환성을 위해 반복적으로 해주는 것들, 중복되는 코드 작성을 최소화하고, 좀더 코딩을 간편하게 하기 위해 사용하는 것.

PostCSS, LESS, SASS, Stylus 등이 있음

 

 

 

---

 

PostCSS

A tool for transforming CSS with JavaScript.

create-react-app 을 사용할 경우, 자동으로 PostCSS가 적용됨.

 

---

PostCSS 사용하기

 

컴포넌트 별로 css파일을 모듈화 하여 사용

 

순수css에서는 컴포넌트별로 다른 css파일을 사용해도 클래스 이름이 같다면 합쳐졌을 때 오버라이팅, 덮어씌워진다.

그래서 BEM*이라는 css 방법론을 사용해 클래스명을 명명하였다.

 

* BEM이란? css의 클래스명을 짓는 방법론.  Blcok, Element, Modifier 세가지를 --와 __로 구분하여 지음. ( Blcok__Element--Modifier)

 

PostCSS에서는 아래와 같은 방법으로 css파일을 모듈화 하여 사용할 수 있다.

 

1. 파일명에 module을 붙인다.

  button1.css  ->  button1.module.css

 

2. import할 때 컴포넌트 내에서 사용할 수 있는 이름을 지정한다.

  import './button1.css';  ->  import styles from '.button1.module.css';

 

3. 클래스명 앞에 지정한 css파일의 이름을 붙인다. (java script형식으로 괄호를 안에 작성)

  실제 클래스명은 나중에 후처리되어 자동으로 생성된 이름으로 지정된다.

  <div className="button">  ->  <div className="{styles.button}">

 

 

 

---

 

PostCSS에서 변수활용하기

 

1. 변수를 할당할 파일을 따로 만든다.

2. @value (key): (value); 형식으로 변수를 할당한다.

// colors.css

@value markWhite: black;
@value markWhite: white;
@value markDarkWhite: #f5f5f3;

3. 다른 module.css 파일에서 변수가 할당된 css파일을 import하여 사용한다.

// index.module.css

@value markBlack from './common/colors.css';
@value markWhite from './common/colors.css';

.container {
  background-color: markBlack;
  color: markWhite;
}