Динамическое создание точек останова со столбцами в sass

Question

То, что я хотел бы сделать, это перебрать мои медиа запросы и столбцы в sass. Например, я сгенерировал классы столбцов со следующим кодом:

$__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);
        }
    }
}

Также ссылка Codepen находится здесь: https://codepen.io/Jesders88/project/editor/bd9e637b08b6c1c907c7fbe8211192f9

Я хотел бы использовать sass карты, которые я выше, и это прекрасно работает. Я зацикливаюсь на медиазапросах. Я не хочу статически кодировать 4 оператора if для моей карты sass. Это должно быть сделано динамически. В основном это сводится к тому, что я хочу иметь набор классов cell-small через cell-xlarge в этом случае. Если я добавлю точку останова, миксин должен учесть это. В основном это должно напоминать начальную загрузку или основу. Ниже то, что я думаю.

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

По сути, мне нужен способ разбить на небольшой точке останова, чтобы сделать 12 столбцов и только 4 на больших экранах. Опять же, я не хочу проходить через точки останова и должен сказать статически

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

Карта sass будет определением точек останова.

Если это не имеет смысла, не стесняйтесь задавать вопросы. Кроме того, не стесняйтесь раскладывать мою ручку и редактировать, если вы выберете. Спасибо за помощь.

Пример того, что мне понравится

<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 ....
}