SASS loop within a loop variable

Question

I'm trying to loop with a loop, the first loop is a list and the second is a sass map. The items in the list represent sass maps. The issue is, in the second loop, an error is thrown if I simply add $ in front of #{$event_type}. Should I be approaching this differently?

The list:

$event_list: 'summit', 'awards', 'awards-europe', 'other';

Example map:

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

Broken Loop:

 @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
        }
    }
 }

score 1 · Accepted Answer · 2017-12-01 19:14:14Z

1

It may be better to use a multi-map structure:

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

The loop will be about the same:

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

SassMeister Demo

edited Dec 1, 2017 at 19:14

answered Dec 1, 2017 at 19:01

user9040595

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

SASS loop within a loop variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related