Generate a grid columns in scss, with media breakpoint particle at the end

Question

I want to generate media queries grids having the below format:

I use a first large/desktop approach, with floats. It is intentional used instead of mobile-first approach.

@media (max-width: 36em) {
  .col-1@sm {
    width: 25%; }
  .col-2@sm {
    width: 50%; }
  .col-3@sm {
    width: 75%; }
  .col-4@sm {
    width: 100%; } 
}

starting from the following grid-config map:

$grid-config: (

        lg: (
                width: em(960px),
                columns: 16,
                gutter-horizontal: rem(8px)
        ),
        md: (
                width: em(768px),
                columns: 8,
                gutter-horizontal: rem(8px)
        ),
        sm: (
                width: em(568px),
                columns: 4,
                gutter-horizontal: rem(8px)
        ),
);

For the first element in the map(lg) I don't want to add a media query.

The first element can change, so I don't want to do a string check (if bp !=='lg') if possible(not like in my code)

I have the following mixin to generate media-query:

@mixin media-breakpoint($bp) {

  $columns: get-grid($bp, columns) !global;

  @if $bp != 'lg2' {
    @media (max-width: get-grid($bp, width)) {
      @content
    }
  } @else {
    @content
  }
}

and another mixin to generate grid:

@mixin grid-generator {
  @each $key, $value in $grid-config {
    $bp: $key !global;
    &--#{$key} {
      @content;
    }
  }

}

Then I use:

.col {
  @include grid-generator {
    @include media-breakpoint($bp) {
      $grid-columns: get-grid($bp, 'columns');
      @for $i from 1 through $grid-columns {
        &-#{$i} {
          width: 100%/$grid-columns * $i;
        }
      }
    }
  }
}

but this generates the following format col--sm-1 and not col-1@sm.

The problems I have:

• keep the cols inside media queryset, and add the media at the end.
• compare to first in grid-config dynamic, check if $bp == first in map, instead of lg