css - scss 関数の戻り値を分離する方法

Question

私は 2 つの SCSS マップ コール$my-map-1とを持っています$my-map-2。各マップには、16 進数の値を持つキーがあります。各マップのキーと 16 進値 ( $key, ) を個別に返す関数を作成しました。$value

その後@if、マップを確認する関数で条件を書きました。マップ名を関数に渡します。そこにマップする場合、チェックは$key指定された名前と同じです。それが本当なら、$valuそれ$keyを私のカラーミックスインに渡します。これは私のコードです。

$my-map-1: (
        map-1-color-1: #506c89,
        map-1-color-2: #737373,
        map-1-color-3: #2a3949,
        map-1-color-4: #182028,
);

$my-map-2: (
        map-2-color-1: #fff,
        map-2-color-2: #000,
        map-2-color-3: #ddd,
        map-2-color-4: #ccc,
);

//the function to read te map and return the key and the value.
@function color-map($color-map) {
  @each $key, $value in $color-map {    
    @return ($key, $value);
  }
}

//mixin
@mixin color-mix($color){
  color: $color;
}

//css classes from here
@if color-map($my-map-1) {
  if($key == map-1-color-1) {
    .my-class{
      @include color-mix($color:$value);
    }
  }
}