2

I am having issues figuring out how to get all three variables at once.

I have a map $breakpoints:

$breakpoints: (
  'large': 1200px,
  'medium': 1024px,
  'tablet': 768px,
  'mini': 480px
) !default;

And a loop that starts like this with the index() function:

  @each $key, $value in $breakpoints {
    $i: index($breakpoints, $key);

}

Or tried

@each $key, $value in $breakpoints {
  $i: index($breakpoints, ($key: $value));
}

@each $key, $value in $breakpoints {
  $i: index($breakpoints, $value);
}

Using only value, not key (not working): https://stackoverflow.com/a/24243797/6368685

Nothing is working. It is always null. The index() function appears to be the ticket except it is only for lists it appears. https://stackoverflow.com/a/53155930/6368685

I also looked at maybe instead of @each get all three via a @for loop. But no answers could I find getting all three values. Is this possible?

JoeD
  • 85
  • 1
  • 9

1 Answers1

2

Try this approach =>

$breakpoints: (
  "large": 1200px,
  'medium': 1024px,
  'tablet': 768px,
  'mini': 480px
) !default;

@each $key, $value in $breakpoints{
  $i: index($breakpoints, $key $value);
  .test {
      margin: #{$i}rem;
  }
}

I tested it on this sass-online-compiler, and it works just fine.

gulp-boilerplate

Mohamed Talaat
  • 171
  • 7