Sass @Each Variable Interpolation

Workaround for Sass variable interpolation in nested loop?

You can't use dynamic variable name in SCSS for now but you could use list as shown below.

//Color chords
$chord: (
  (color1:orange,  color2: magenta, color3: gray, color4: yellow)
  (color1:magenta, color2: blue,    color3: gray, color4: orange)
);

@for $c from 1 through length($chord) {
    $subList: nth($chord, $c);
    #chord#{$c} {
        @for $i from 1 through length( $subList ) {
            .color#{$i} {
                $c1: map-get( $subList, color#{$i});
                fill: $c1;
                color: $c1;
            }
        }

    }
}

Double interpolation (variable inside variable) in Sass

Sass now has maps, so you can do:

$colors: (gray: gray, white: white);

then loop through it.

But you can't interpolate within interpolations.

Sass Interpolation of Mixin, Function, and Variable names

Interpolation doesn't work on mixins or variables at this point in time. You'll have to come up with a different way to achieve your goal.

As of Sass 3.3, you can use mappings for this purpose for variables:

$dialogs:
    ( error:
        ( light: red
        , dark: darken(red, 10%)
        )
    , success:
        ( light: green
        , dark: darken(green, 10%)
        )
    );

@each $name, $colors in $dialogs {
  .#{$name} {
      color: map-get($colors, dark);
  }
}

And for functions:

@function green() {
  @return lighten(green, 10%);
}

@function red() {
  @return lighten(red, 10%);
}

@mixin my-bg($function-name) {
  background: call($function-name);
}

.foo {
  @include my-bg('red');
}

sass $ concatenate with interpolation

I think the following may work for you:

$color-list: (
  msg: (
  base: #669bdf,
  hover: #548ed8,
  active: #3873be
  ),
  suc: (
  base: #1cBB9c,
  hover: #10b091,
  active: #10947a
  )
);

@each $name, $colors in $color-list {
  .#{$name} {
    background-color: map-get($colors, base);
    &:hover {
      background-color: map-get($colors, hover);
    }
    &:active {
      background-color: map-get($colors, active);
    }
  }
}

Edit: You can't concatenate variables the way you want to, so that's why I came up with this solution.

---

Related Topics