Css 循环变量中的SASS循环

Css 循环变量中的SASS循环,css,loops,sass,Css,Loops,Sass,我正在尝试使用循环进行循环,第一个循环是列表,第二个是sass映射。列表中的项目表示sass映射。问题是,在第二个循环中,如果我在#{$event_type}前面简单地添加$,就会抛出一个错误。我应该以不同的方式来处理这个问题吗 名单如下: $event_list: 'summit', 'awards', 'awards-europe', 'other'; 示例地图: $awards: ( content-marketing: #F47521, digiday: #FFDD00,

我正在尝试使用循环进行循环,第一个循环是列表,第二个是sass映射。列表中的项目表示sass映射。问题是,在第二个循环中,如果我在#{$event_type}前面简单地添加$,就会抛出一个错误。我应该以不同的方式来处理这个问题吗

名单如下:

$event_list: 'summit', 'awards', 'awards-europe', 'other';
示例地图:

 $awards: (
   content-marketing: #F47521,
   digiday: #FFDD00,
   publishing: #89C63F,
   signal: #33AADB,
   video: $pink
 );
断环:

 @each $event_type in $event_list {

    @each $event, $color in #{$event_type} {

        &.#{$event_type}-#{$event} {

            section h2, h3 {
                color: #{$color};
                border-color: #{$color};
            }

            // More CSS
        }
    }
 }

最好使用多贴图结构:

$event_list: (
  'summit': (
    key1: #000,
    key2: #fff
  ),
  'awards': (
    content-marketing: #F47521,
    digiday: #FFDD00,
    publishing: #89C63F,
    signal: #33AADB,
    video: $pink
  )
);
循环将大致相同:

// Note the added $map variable.
@each $event_type, $map in $event_list {

  @each $event, $color in $map {

    &.#{$event_type}-#{$event} {
      section h2, h3 {
        color: #{$color};
        border-color: #{$color};
      }

      // More CSS
    }
  }
}