Dynamically creating breakpoints with columns in sass

Question

What I would like to do is loop through my media queries and columns in sass. For example, I have generated the column classes with the following code:

$__grid--columns: 12;
$__grid--breakpoints: (
    small:0,
    medium:667px,
    large:1024px,
    xlarge:1200px
);
$__grid--gutters: (
    small:30px,
    medium:30px,
    large:30px
);

@each $key, $value in $__grid--breakpoints {
    @for $i from 1 through $__grid--columns {
        &.#{$key}-#{$i} {
            width: ( (100% / $__grid--columns) * $i);
        }
    }
}

Also Codepen link is here: https://codepen.io/Jesders88/project/editor/bd9e637b08b6c1c907c7fbe8211192f9

I would like to use sass maps which I am above, and it works fine. Where I am getting hung up is the media queries. I don't want to statically code 4 if statements for my sass map. It needs to be done dynamically. Basically what it boils down to is I want to have a set of classes cell-small through cell-xlarge in this case. If I add a breakpoint the mixin needs to accommodate that. Basically it needs to resemble bootstrap or foundation. Below is what I am thinking.

<div class="cell cell-sm-12 cell-lg-4">
    @content Goes Here.
</div>

Basically I need a way to break at the small breakpoint to make 12 columns and only have 4 on large screens. Again, I don't want to have loop through the breakpoints and have to statically say

@if(breakpoint == sm){ do this }

The sass map will be the definition of the breakpoints.

If this doesn't make sense, feel free to ask questions. Also, feel free to fork my pen and edit if you choose. Thanks for the help.

EXAMPLE OF WHAT I'D LIKE

<div class="container">
    <div class="row gutter">
        <div class="cell small-12 large-4">
            Content Goes HERE
        </div>
    </div>
</div>

CSS

.gutter {
 > .cell { margin-left://GENERATED FROM SASS MAP }
 > .cell .small-1 { //GENERATED WIDTH }
 > .cell .small-2 { //GENERATED WIDTH }
 > .cell .small-3 { //GENERATED WIDTH }
 > .cell .small-4 { //GENERATED WIDTH }
 > .cell .small-5 { //GENERATED WIDTH }
 > .cell .small-6 { //GENERATED WIDTH }
 > .cell .large-1 { //GENERATED WIDTH }
 > .cell .large-2 { //GENERATED WIDTH }
 > .cell .large-3 { //GENERATED WIDTH }
 > .cell .large-4 { //GENERATED WIDTH }
 > .cell .large-5 { //GENERATED WIDTH }
 > .cell .large-6 { //GENERATED WIDTH }
     //REST OF THE VALUES ....
}