Sass loops and variables

Question

I know already you can't text interpolate a variable name, which is unfortunate. But I look at this huge block in my scss file and wonder if there is any way to shorten this with a for loop...

      #chord1 {
    .color1 {
      color: map-get($chord1, color1);
      fill: map-get($chord1, color1);
    }
    .color2 {
      color: map-get($chord1, color2);
      fill: map-get($chord1, color2);
    }
    .color3 {
      color: map-get($chord1, color3);
      fill: map-get($chord1, color3);
    }
    .color4 {
      color: map-get($chord1, color4);
      fill: map-get($chord1, color4);
    }
    .color5 {
      color: map-get($chord1, color5);
      fill: map-get($chord1, color5);
    }
    .color6 {
      color: map-get($chord1, color6);
      fill: map-get($chord1, color6);
    }

  }
  #chord2 {
    .color1 {
      color: map-get($chord2, color1);
      fill: map-get($chord2, color1);
    }
    .color2 {
      color: map-get($chord2, color2);
      fill: map-get($chord2, color2);
    }
    .color3 {
      color: map-get($chord2, color3);
      fill: map-get($chord2, color3);
    }
    .color4 {
      color: map-get($chord2, color4);
      fill: map-get($chord2, color4);
    }
    .color5 {
      color: map-get($chord2, color5);
      fill: map-get($chord2, color5);
    }
    .color6 {
      color: map-get($chord2, color6);
      fill: map-get($chord2, color6);
    }

  }
  #chord3 {
    .color1 {
      color: map-get($chord3, color1);
      fill: map-get($chord3, color1);
    }
    .color2 {
      color: map-get($chord3, color2);
      fill: map-get($chord3, color2);
    }
    .color3 {
      color: map-get($chord3, color3);
      fill: map-get($chord3, color3);
    }
    .color4 {
      color: map-get($chord3, color4);
      fill: map-get($chord3, color4);
    }
    .color5 {
      color: map-get($chord3, color5);
      fill: map-get($chord3, color5);
    }
    .color6 {
      color: map-get($chord3, color6);
      fill: map-get($chord3, color6);
    }

  }

when my map is this:

$chord1: (color1:blue, color2: purple, color3: #eee, color4: teal, color5: green, color6: gray);

$chord2: (color1:orange,  color2: magenta, color3: gray, color4: yellow,color5: green, color6: gray);

$chord3: (color1:green ,  color2: blue,    color3: gray, color4: blue,color5: green, color6: gray);

If it wasn't for the variable interpolation issue I could get this scss down to two nested for loops, similar to this:

$spacers: (xs: 10px,sm: 20px, md: 30px, lg: 40px, xl: 50px);
$directions: (top, bottom);
// usage "spacer-top-sm"

@each $direction in $directions {
   @each $spacer, $amt in $spacers {
      .spacer-#{$direction}-#{$spacer} {
         margin-#{$direction}: $amt;
      }
   }
}

But it doesn't seem like "trick" can work here, due to the map-get wanting the actual variable.

possible duplicate of [Sass @each with multiple variables](http://stackoverflow.com/questions/6572588/sass-each-with-multiple-variables) — cimmanon, Feb 27 '15 at 15:25
I'll see if anything over there works. It's a little different. — Steve, Feb 27 '15 at 16:33

score 0 · Accepted Answer · answered Mar 04 '15 at 22:09

Probably a little bit late, but the following should do the trick!

/**
 * Chord Color Mixin
 * 
 * @access public
 *
 * @requires {List} $colors - Space Deliminated list of Colors
 *
 */
@mixin chord-color($colors) {
    $i: 0;
    @each $color in $colors {
        $i: $i + 1;
        .color#{$i} {
            color: $color;
            fill: $color;
        }
    }
}

/**
 * Chord1
 */
#chord1 {
    @include chord-color(blue purple #eee teal green gray);
}

/**
 * Chord2
 */
#chord2 {
    @include chord-color(orange magenta gray yellow green gray);
}

/**
 * Chord3
 */
#chord3 {
    @include chord-color(green blue gray blue green gray);
}

The Colors passed in the @include will be added in their relevant order. Adding a new color to the end will create a .color7 for the current #chord.

The list is ordered as it will be compiled, from left to right.

Sass loops and variables

1 Answers1