Петли и переменные Sass

Question

Я уже знаю, что вы не можете интерпретировать интерполяцию имени переменной, что является неудачным. Но я смотрю на этот огромный блок в моем файле SCSS и интересно, если есть какой-нибудь способ, чтобы сократить это с цикл ...

 #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); 
    } 

    } 

когда моя карта это:

$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); 

Если это не для переменного вопроса интерполяции я мог бы получить эту SCSS до двух вложенных циклов for, подобных этому:

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

Но это не похоже, «трюк» может работать здесь, в связи с map-get wantin g фактическая переменная.

Answer 1

Возможно, немного поздно, но следующее должно сделать трюк!

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

Цвет прошел в @include будет добавлен в их соответствующем порядке. Добавление нового цвета в конец создаст .color7 для текущего #chord.

Список упорядочен, поскольку он будет скомпилирован слева направо.