如何在sass中输出地图颜色名称？

Question

我有一张使用以下结构的地图：

$palette: (

  scarlet: (
    base: $scarlet,
    light: lighten($scarlet, $tone-level),
    dark: darken($scarlet, $tone-level),
    trans: transparentize($scarlet, $trans-level)
  ),

  emerald: (
    base: $emerald,
    light: lighten($emerald, $tone-level),
    dark: darken($emerald, $tone-level),
    trans: transparentize($emerald, $trans-level)
  ),
)


 @each $color-key, $color-variants in $unicorn-palette {
    $base-color-value: map-get($color-variants, 'base');

$light: map-get($color-variants, 'light');
$dark: map-get($color-variants, 'light');
$trans: map-get($color-variants, 'trans');

我希望能够通过以下逻辑访问我的颜色值，并在之前和之后打印其键名和十六进制值：

&.#{$color-key} {
      background-color: $base-color-value;

      &:before { content: "#{$color-key}"; }
      &:after { content: "#{$base-color-value}"; }

      &--light {
      background-color: $light;
        &:before { content: "#{$color-key}"}
        &:after { content: "#{$light}"; }
      }

      &--dark {
      background-color: $dark;
      &:after { content: "#{$dark}"; }
      }

      &--trans {
      background-color: $trans;
      }


     }  
  }
}

所以样式看起来如下emerald--light正在起作用。但是我可以访问＆＃34; base＆＃34;的十六进制和颜色值。但不是我想要在容器内打印的变体以及此颜色的十六进制值。这就是我一直在尝试的，但是$ color-key只能获得第一个基色而不是＆＃34; light＆＃34;在地图上的色调。它仅使用错误的颜色名称打印正确的浅色十六进制值。

      background-color: $light;
        &:before { content: "#{$color-key}"}
        &:after { content: "#{$light}"; }
      }

如何让emerald-light在其旁边显示十六进制和emerald-light对应的名称？