dynamic variables

I am hoping someone with more sass knowledge can let me know if creating variables from a sass map is at all possible. here is a contrived example of what i am trying to do…

$colors-map: (
  "red": (
    dark: #aa142d
  ),
);

@each $name, $variations in $colors-map {
  @each $variation, $hex in $variations {
    $color-#{$name}-#{$variation}: $hex;
  }
}

.foo {
  background-color: $color-red-dark;
}

[lolmaus]

Duplicate.

PS Use maps.

[lolmaus]

im just storing hex values in a variable so i wouldn’t say its legacy, i just want a drop-in solution using maps that is easier to maintain.

Replace

$color-red: #a00;
html { foo: $color-red; }

with

$colors: ('red': #a00);
html { foo: map-get($colors, 'red'); }

or even better with:

@function col($col) {
  @return map-get($colors, '#{$col}');
}

$colors: ('red': #a00);
html { foo: col(red); }

is there any plans on supporting variable interpolation in the future?

This question has been asked many times since 2011. You’ve been linked to the issue where this question is answered.