09컴퍼넌트스타일링 node-modules에서 라이브러리 불러오기(open-color, include-media)

Sass 라이브러리 설치(open-color, include-media)

$yarn add open-color include-media

node_modules의 라이브러리 블러올시 내부경로 ~로 표기

768px media min 에서 background $oc-gray-9 로 변경

 

//utils.scss
@import "~include-media/dist/include-media";
@import "~open-color/open-color";

$red: red;
$orange: orange;
$yellow: yellow;
$green: green;
$blue: blue;
$indigo: indigo;
$violet: violet;

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

//SassComponent.scss
@import "./styles/utils";

.SassComponent {
  display: flex;
  background: $oc-gray-2;
  @include media("<768px") {
    background: $oc-gray-9;
  }
  .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;
    }
  }
}