grid.sass

$debug: false;
$column: 50px;
$gutter: 30px;

.wrap {
    margin: 0 auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

@mixin media-min-width($min-width) {
    @if $min-width == null {
        @content;     
    } @else {
        @media (min-width: $min-width) {
            @content;
        }
    }
}

%col {
    margin-right: 30px;
}

%col-debug {
    &:before {
        display: block;
        text-align: center;
        background: #cfc;
    }
}

@each $size, $cols in (xs, 4), (sm, 8), (md, 12) {
  @for $i from 1 through $cols {
		.col-#{$size}-#{$i} {
			@extend %col;
		}
	}
}

@each $size, $cols, $min-width  in (xs, 4, null), (sm, 8, 640px), (md, 12, 1024px) {
    @include media-min-width($min-width) {
        .wrap {
            width: $cols * ($column + $gutter) - $gutter;
        }

        @for $i from 1 through $cols {
            .col-#{$size}-#{$i} {
                width: if($size != xs, $i * ($column + $gutter) - $gutter, ($i * 100% / $cols));
            }
        }

        @if $size == sm {
            @for $i from 1 through 4 {
                .col-xs-#{$i} {
                    @extend .col-sm-#{$i};
                }
            }
        }

        @if $debug {
            @for $i from 1 through $cols {
                .debug .col-#{$size}-#{$i} {
                    @extend %col-debug;
                    &:before {
                        content: '#{$i}/#{$cols}';
                    }
                }
            }
        }

        
        @for $i from 1 through $cols {
            .offset-#{$size}-#{$i} {
                margin-left: if($size != xs, $i * ($column + $gutter), ($i * 100% / $cols));
            }
        }
    }
}