09컴퍼넌트스타일링 scss @import로 공통 믹스인 분리하기

utils.scss에서 선언한 변수와 믹스인을 SassComponent.scss로 import하기

/*utils.scss*/
$red: red;
$orange: orange;
$yellow: yellow;
$green: green;
$blue: blue;
$indigo: indigo;
$violet: violet;

@mixin square($size) {
  $calculated: 32px * $size;
  width: $calculated;
  height: $calculated;
}

@import "./styles/utils";

.SassComponent {
  display: flex;
  .box {
    background: red;
    cursor: pointer;
    transition: all 0.3s ease-in;
    &.red {
      background: $red;
      @include square(1);
    }
    &.orange {
      background: $orange;
      @include square(2);
    }
    &.yellow {
      background: $yellow;
      @include square(3);
    }
    &.green {
      background: $green;
      @include square(4);
    }
    &.blue {
      background: $blue;
      @include square(5);
    }
    &.indigo {
      background: $indigo;
      @include square(6);
    }
    &.violet {
      background: $violet;
      @include square(7);
    }
    &:hover {
      background: black;
    }
  }
}