Programmatically stack SASS breakpoints in a json-like structure and use them to create a grid system layout

Dynamic grid layout in SASS

$smallphone: 480px;
$phone: 640px;
$tablet: 768px;
$desktop: 1024px;
$wide: 1440px;

// Grid breakpoints map
$breakpoints: (small: null, medium: "screen and (min-width: 768px)", large: "screen and (min-width: 1440px)");

// Non-grid breakpoints map
$phone: "screen and (min-width: 480px)";
$tablet: "screen and (min-width: 769px)";
$desktop: "screen and (min-width: 1024px)";
$onlyMobile: "only screen and (max-width: 767px)";
$onlyTablet: "only screen and (min-width: 768px and max-width: 1023px)";
$onlydesktop: "only screen and (min-width: 1024px and max-width: 1439px)";

.container {
    .row {
        @include row;

        &__flex {
            position: relative;
            display: flex;
        }

        &__cf {
            @extend %clearfix;
        }
    }

    // grids
    .col {
        position: relative;

        @each $mq in $breakpoints {
            $key: nth($mq, 1);
            $value: nth($mq, 2);

            // grid by breakpoint
            @for $i from 1 through $grid-columns {
                &.#{$key}-#{$i} {

                    @if $value {
                        @media #{$value} {
                            @include span-columns($i);
                        }
                    }

                    @else {
                        @include span-columns($i);
                    }

                    &--omega {
                        @if $value {
                            @media #{$value} {
                                @include span-columns($i, block-collapse);
                            }
                        }

                        @else {
                            @include span-columns($i, block-collapse);
                        }
                    }

                    &--last-of-row {
                        margin-right: 0;
                    }
                }

                &.#{$key}-shift-#{$i} {

                    @if $value {
                        @media #{$value} {
                            @include shift($i);
                        }
                    }

                    @else {
                        @include shift($i);
                    }
                }
            }
        }
    }
}