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