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}("cannot find variable $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;
            }
        }

    }
}

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

Workaround for Sass variable interpolation in nested loop?

css

sass