在sass颜色图中打印出当前颜色十六进制值和变量名称 [英] Print out current color hex value and variable name in sass color map

问题描述

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

I am trying to create dynamic color swatches for a styleguide. I am iterating through each color in my $colors-list variable and would like to then print out the current hex value and variable names.

我希望它看起来像这样:

I would like it to look like this:

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

So far I can see that the hex value shows up in dev tools but is not being printed out. The variable names are also showing the hex values and it's printing out all of them. Am I missing something?

$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 版本的列表列表).

You can't. Variables don't work that way (not in Sass or any other language I am aware of). A variable is just a reference to a value, it doesn't understand what its name is. The only thing you can do is use a mapping (or list of lists for Sass versions older than 3.3).

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

这篇关于在sass颜色图中打印出当前颜色十六进制值和变量名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！