$grid-width: 550px;
$total-columns: 12;
$gutter-width: 20px;

@mixin span-columns($column-span, $grid-width, $gutter-width) {
    $total-gutter: $gutter-width * ($column-span - 1); 
    $total-col-width: grid-column-width($grid-width, $gutter-width) * $column-span;
    width: rwd-width($total-gutter + $total-col-width, $grid-width);
}

@function grid-column-width($grid-width: $grid-width, $gutter-width: $gutter-width) {
    $total-gutter: $gutter-width * $total-columns;
    $total-column-width: $grid-width - $total-gutter;
    @return $total-column-width / $total-columns;
}

@function rwd-width($target, $context) {
    @return $target / $context * 100%;
}

@mixin col-padding($grid-width, $gutter-width) {
    $rwd-padding: rwd-width($gutter-width, $grid-width) / 2;
    padding-left: $rwd-padding;
    padding-right: $rwd-padding;
}


@for $i from 1 through $total-columns {
    .col-xs-#{$i} {
        @extend .col;
        @include col-padding($grid-width, $gutter-width);
        @include span-columns($i, $grid-width, $gutter-width);
    }

    .col-xs-pull-#{$i}, .col-pull-#{$i} {
        right: rwd-width($i, $total-columns);
        position: relative;
    }

    .col-xs-push-#{$i}, .col-push-#{$i} {
        left: rwd-width($i, $total-columns);
        position: relative;
    }
}

.container {
    margin: 0 auto;
    max-width: $grid-width;
    min-width: 300px;
}

.row {
    max-width: 100%;
    overflow: auto;
}

.col {
    float: left;
    position: relative;
}

.test-grid-col {
    min-height: 50px;
    border: 1px dotted #808080;
    background-color:antiquewhite;
}

.test-grid > div.row {
    margin-top: 10px;
    margin-bottom: 10px;
}

@mixin rwd-grid($viewport-min-width, $grid-width, $gutter-width, $grid-size) {
    @media(min-width: $viewport-min-width) {
        .container {
            max-width: $grid-width;
        }

        @for $i from 1 through $total-columns {


            .col-#{$grid-size}-#{$i} {
                @include col-padding($grid-width, $gutter-width);
                float: left;
                position: relative;
                @include span-columns($i, $grid-width, $gutter-width);  
            }

            .col-#{$grid-size}-pull-#{$i} {
                right: rwd-width($i, $total-columns);
            }

            .col-#{$grid-size}-push-#{$i} {
                left: rwd-width($i, $total-columns);
            }

        }

    }
}

@include rwd-grid(770px, 750px, 20px, "sm");
@include rwd-grid(980px, 960px, 20px, "md");
@include rwd-grid(1200px, 1170px, 30px, "lg");