嵌套循环中Sass变量插值的解决方法？

Question

我意识到这是一个很大的问题，现在是Sass，并且看了一些解决方案，但我有一组地图，我正在尝试创建一个循环，如：

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

%fillcolor {

}

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

当然，Sass（3.4.5）在$chord#{$c}上窒息（“无法找到变量$ chord”）。

在这种情况下是否有解决办法？

Answer 1

您现在无法在SCSS中使用动态变量名称，但您可以使用如下所示的列表。

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

    }
}