Generating a grid in sass.

grid.scss

// Your columns are at a weird width here - Use the gutter on the row as well.

$width: 1244px;
$columns: 12;
$gutter: 16px;

.row {
    width: 100%;
    max-width: $width;
    box-sizing: border-box;
    padding: 0 $gutter;
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

.column, 
.columns {
    float: left;
    min-height: 1px;
    margin-left: $gutter;
    &:first-child{
        margin-left: 0;
    }
}

@function columns($i){
    @return ( ($width/$columns) * $i )  / $width * 100;
}

@for $i from 1 through $columns{
    .col-#{$i}.column {
        width: calc( #{columns($i)}% - #{$gutter});
    }
}