PostCSS에서 root로 간편하게 코딩하기 (@value)

프로젝트에서 많이 쓰이는 색상들이 존재하는데

css할 때 이 색상을 하나하나 부르는 것보다

미리 root로 정해줘서 그 값을 부르는게 더 간편하다.

이유는, 만약 색상을 변경해야하는 상황이 온다면

제일 상위 root로 가서 한번만 변경하면 모든 값이 변경되기 때문이다.

 

 

먼저 src폴더에서 common이나 base폴더를 만들어준다.

그 안에 ui인지 유틸리티인지 또 폴더로 나누어서 만들어줘도 됨.

 

 

그 안에는 colors와 size CSS파일을 만들어준다.

 

@value key: value;

그리고 postCSS에서는 이렇게 

value를 사용해서 key와 value로 정의해준다.

 

@value mediaQuery: 62rem;

size.css에는 미디어쿼리를 설정해준다.

 

그럼 나중에 사이즈를 변경할때도 컴포넌트마다

수정할 필요없이 여기에서 한번에 수정이 가능하다.

 

@value fridgeBlack from './common/colors.css';

body {
  background-color: fridgeBlack;
}

적용방법은 적용하고자 하는 css파일로 가서

상단에 @value를 선언하고 from을 통해서 파일 경로를 불러온다.

 

 

@value fridgeBlack, fridgeWhite from './common/colors.css';

만약 여러가지의 색상을 불러오려면

, 를 사용해서 key값을 불러온다.

 

 

여기서 중요한 점이 있는데, 이렇게 사용을 하려면 꼭 모듈화를 해야한다.

이렇게 사용하고자 하는 css파일에 .module을 붙여서 만든다.
(임포트하는 곳에서도 당연히 같은 이름으로-)