在sass颜色映射中打印当前颜色十六进制值和变量名称

我正在尝试为styleguide创建动态色样。我正在遍历$colors列表变量中的每种颜色，然后想打印出当前的十六进制值和变量名

我希望它看起来像这样：

到目前为止，我可以看到hex值显示在dev工具中，但没有打印出来。变量名也显示了十六进制值，并打印出所有的十六进制值。我错过什么了吗

$colors-list: (
  $color-brand
  $color-secondary
  $color-accent
  $color-base
  $color-alert
  $color-error
  );

@each $current-color in $colors-list {
    $i: index($colors-list, $current-color);
    .color-#{$i} { 
        background-color: $current-color;
        color: white;
        float: left;
        height: 100px;
        margin: 5px;
        position: relative;
        width: 100px;
      &:after {
          content: “hex value is #{$current-color} var name is #{$colors-list, $i}”;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 9999;
        }
    }
}

---

你不能。变量不是这样工作的，在Sass或我所知道的任何其他语言中都不是。变量只是对值的引用，它不知道它的名称是什么。您唯一能做的就是为早于3.3的Sass版本使用映射或列表列表

$colors-list: (
  brand: yellow,
  secondary: blue,
  accent: green,
  base: orange,
  alert: purple,
  error: red
  );

@each $name, $color in $colors-list {
    .color-#{$name} { 
        background-color: $color;
        color: white;
        float: left;
        height: 100px;
        margin: 5px;
        position: relative;
        width: 100px;
      &:after {
          content: "hex value is #{$color} var name is #{$name}";
          position: absolute;
          top: 0;
          left: 0;
          z-index: 9999;
        }
    }
}

---

好的，很高兴知道，谢谢你@cimmanon