이제 utils.scss 파일에서 선언한 변수와 믹스인을 SassComponent.scss에서 사용해 보겠습니다. 다른 scss 파일을 불러올 때는 @import 구문을 사용합니다.

SassComponent.scss

@import './styles/utils';
.SassComponent {
  display: flex;
  .box {
    background: red; // 일반 CSS에서는 .SassComponent .box와 마찬가지
    cursor: pointer;
    transition: all 0.3s ease-in;
    (...)
  }
}

---

 

이제 utils.scss 파일을 분리하기 전의 결과와 같은 결과가 나타나는지 확인해 보세요!