더북(TheBook)

9.2.3 변수와 믹스인을 전역적으로 사용

 

변수와 믹스인은 여러 곳에서 재사용하려고 만든 것인데, 현재 우리는 CSS Module을 적용한 상태이므로 변수들과 믹스인을 파일마다 공유하지 않습니다. 따라서 이를 전역적으로 사용할 수 있도록 스타일 디렉터리를 만들어 전역적으로 쓰는 코드는 따로 분리하고, 컴포넌트 스타일 파일에서 불러와 사용해 보겠습니다.

src 디렉터리에 styles 디렉터리를 만들고, utils.scss 파일도 만들어 보세요. 이 파일에 App.scss에 있던 $sizeplace-at-center를 잘라 내서 넣어 보세요.

src/styles/utils.scss

$size: 100px;
 
@mixin place-at-center() {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 

이렇게 파일을 만들고 나면, App.scss에서 다음과 같이 불러와 사용할 수 있습니다.

src/App.scss

@import ‘./styles/utils’;
 
.box {
  (...)

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.