在 sass 颜色图中打印出当前颜色十六进制值和变量名称 [重复]

Question

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

我希望它看起来像这样：

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

$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;
        }
    }
}

Answer 1

你不能。变量不是这样工作的（不是在 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;
        }
    }
}