Trying to optimize sass breakpoint mixin - sass

Question

I created a simple mixin for dealing with some media queries that I have working but would love to output the min and max values with whats in the map. I am having trouble with the max width as it should be the value after the first and so on. I currently have it working without the #each loop and using a get map value function. I might be over complicating this.
For example
#media (min-width:first val in map) and (max-width:next val in map)
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px
);
#mixin breakpoint($point) {
#each $breakpoint in $breakpoints {
#media (min-width:nth($breakpoint, 2)) and (max-width:next-size)) { #content; }
}
}
The output css should be:
#media (min-width: 0) and (max-width: 640px) {}
#media (min-width: 640px) and (max-width: 1024px) {}
any suggestions would be greatly appreciated.

Answer 1

You will have to first get the key of the next breakpoint inside the each loop and then get the value by using map-get
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px
);
#mixin breakpoint() {
#each $breakpoint in $breakpoints {
$i: index($breakpoints, $breakpoint);
#if $i < 3 {
$nextKey: nth(map-keys($breakpoints), $i+1);
#media (min-width:nth($breakpoint, 2)) and (max-width:map-get($breakpoints,$nextKey)) { #content; }
}
}
}
#include breakpoint() {
width: 50%;
}