프로젝트에서 공통으로 쓰이는 css 속성을 한곳에 정리

프로젝트가 커지다 보면 CSS를 수정해야 될 때 하나하나 찾아서 수정하는 것이 아니라 공통된 속성을 한곳에 정리하면 유지보수시에 매우 편리하다.

React에서는 파일 구조를 잘 나눠서 만들어 보도록 하겠다.

src안에 common이라는 폴더를 만들고 color와 size에 대한 css 속성들을 정리한다. 

다음과 같이 key와 value로 설정해 놓으면 공통 속성을 정의한 후에 쉽게 사용하고 바꿀 수 있다.

@value key: value;

 

@value makerBlack: black;
@value makerWhite: white;
@value makerLightGrey: #e8e7e6;
@value makerLightPink: #ffeae8;

 

그리고 사용하려는 .css 파일에서 다음과 같이 선언해 주고 사용하면 된다.

이때 주의해야 하는 점은 .module.css 파일이여야 한다. (예를 들어, index.modlue.css)

@value makerBlack from './common/colors.modlue.css';