[React] utils 함수 분리하기

여러 파일에서 사용될 수 있는 Sass 변수 및 믹스인은 다른 파일로 따로 분리해서 적성하면 필요한 곳에서 불러와 사용할 수 있다.

• 예제
  src 디렉터리에 styles라는 디렉터리를 생성하고, 그 안에 utils.scss 파일을 만든다. 그다음 기존 SassComponent.scss에 작성했던 변수와 믹스인을 잘라내서 이동시켜 보자.
  
  

  • src/styles/utils.scss

    // 변수 사용하기
    $red: #fa5252;
    $orange: #fd7e14;
    $yellow: #fcc419;
    $green: #40c057;
    $blue: #339af0;
    $indigo: #5c7cfa;
    $violet: #7950f2;
    
    // 믹스인 만들기(재사용되는 스타일 블록을 함수처럼 사용할 수 있음)
    @mixin square($size) {
     $calculated: 32px * $size;
     width: $calculated;
     height: $calculated;
    }

    
    이제 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 파일을 분리하기 전의 결과와 같은 결과가 나타나는지 확인해보라!