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

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

$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

，这是有效的。但是，我可以访问“base”的十六进制值和颜色值，但不能访问我想在容器中与此颜色的十六进制值一起打印的变体。这就是我一直在尝试的，但是$COLOR键只拾取第一个底色，而不拾取地图中的“浅”色调。它只打印正确的灯光十六进制值和错误的颜色名称

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

---

如何让

emerald light

在旁边显示十六进制和

emerald light

对应的名称？

您能在JSFIDLE中复制这个吗？我试着跟着我的想法，但这很复杂。嗨，杰克。我只有一支笔：这有用吗？同样的：）我会回到YouTunks，基本上我完全困惑于将地图“光、暗、trans等”提取到一个函数中而不是它们的值是多么困难。你能在JSFIDLE中重现这个吗？我试着跟着我的想法，但这很复杂。嗨，杰克。我只有一支笔：这有用吗？同样的：）我会回到YouTunks，基本上我完全困惑于将地图“光、暗、trans等”提取到一个函数而不是它们的值中有多么困难。