Print out current color hex value and variable name in sass color map [duplicate]

Answer 1

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