I’m struggling with a SCSS mixin to apply grid-column-start and grid-column-end based on some predefined breakpoints with media queries. I can loop through without the media query for the desired result in outputting 1 from 12 but how can I also use the same @each loop to loop through my media query sc mixin?

$breakpoints: (
sm: 576px,
lg: 768px,
xl: 992px,
xxl: 1200px,
);

@mixin sc($point) {
  @if $point == sm {
    @media (min-width: map.get($breakpoints, "sm")) {
      @content;
    }
  } @else if $point == lg {
    @media (min-width: map.get($breakpoints, "lg")) {
      @content;
    }
  } @else if $point == xl {
    @media (min-width: map.get($breakpoints, "xl")) {
      @content;
    }
  } @else if $point == xxl {
    @media (min-width: map.get($breakpoints, "xxl")) {
      @content;
    }
  }
}

@each $breakpoint in $breakpoints {
    @for $i from 1 through 12 {
      .u-gc-start-#{$i} {
          grid-column-start: ($i);
      }
       .u-gc-end-#{$i} {
          grid-column-end: ($i);
      }
    }
}

This will end up getting messy each time though as there is only one declaration within one rule.

How would it be possible to loop through and do something like:

.u-gc-#{$from}/#{$to}@{$breakpoint} {
    @media ($breakpoint) {
       grid-column-start:#{$from};
       grid-column-end:#{$to};
     }
}