Sass map produce variable names [duplicate]

Question

I have a map in Sass with keys and values

 $colors: (blue: #0081d2, green: #288600, orange: #e57323);

 @each $color, $value in $colors {
    .#{$color} {
        color: $value; 
    }
 }

This works and gives me css classnames with the appropriate values, like:

 .blue{
    color: #0082d1;
 }

What is would like to have is a function that produces sass variables based on the keys in the map.

 $blue:  #0082d1;
 $green: #288600;

I have been breaking my head but can't get it to work.

Answer 1

You could create a function to return the value by the key specified.

Example

$colors: (blue: #0081d2, green: #288600, orange: #e57323);

@function color($color) {
    @return map-get($colors, $color);
}

.bacon {
  color: color(blue);
}

Results in

.bacon {
  color: #0081d2;
}