여러개의 모드(다크,민트등) SCSS 제작 방식

scss 구현 부분

$colors:(
  standard: (
    primary-color-blue: #2aace2,
    mid-blue-color:#2695d2,
    dark-blue-color:#124b62
  ),
  contrasted: (
    primary-color-blue: #177eab,
    mid-blue-color:#1c6f9b,
    dark-blue-color:#124b62
  )
);


@function get-color($key, $type: 'standard'){
  @each $name, $color in map-get($colors, $type){
    @if($key == $name){
      @return $color
    }
  }
}

@mixin get-color($property,$color){
  #{$property}: get-color($color);
  @at-root body.contrasted & {
    #{$property}: get-color($color, contrasted);
  }
}
.className{
  @include get-color(background-color, primary-color-blue)
}

css 빌드후

.className {
  background-color: #2aace2;
}
body.contrasted .className {
  background-color: #177eab;
}

이렇게 출력되요