SCSS responsive grid generator mixin

grid-system.scss

@mixin grid-column ($span, $cols: 12) {
    width: ($span * 100 / $cols) * 1%;
}

@mixin grid-offset ($span, $cols: 12) {
    margin-left: (($span * 100) / $cols) * 1%;
}

@mixin grid-system ($cols: 12, $gutter: 20px, $child: '.col', $off: '.off', $all-columns: true, $separate: '-', $breakpoint: 650px) {
    @include clearfix();
    margin-bottom: $gutter;

    $all: '';
    $h-margin: ($gutter / -2);

    margin-left: $h-margin;
    margin-right: $h-margin;

    @if $all-columns {
        $all: '& ' + $child + $separate + '1';

        @for $x from 2 through ($cols - 1) {
            $all: $all + ', & ' + $child + $separate + $x;
        }

        @for $x from 1 through $cols {
            #{$child + $separate + $x} {
                @include grid-column($x, $cols);
            }
        }

        @for $x from 1 through $cols {
            #{$off + $separate + $x} {
                @include grid-offset($x, $cols);
            }
        }

    } @else {
        $all: $child;

        #{$all} {
            @include grid-column(1, $cols);
        }
    }

    #{$all} {
        float: left;
        padding: 0 ($gutter / 2);
        box-sizing: border-box;
        min-height: 1px;
    }

    @media (max-width: $breakpoint) {
        margin: 0;

        #{$all} {
            float: none;
            width: auto;
            display: block;
            margin-bottom: $gutter;
            margin-left: auto;
        }
    }
}