Sass grid system

HTML

<div class="container">
            <div class="row">
                <div class="col span1"></div>
                <div class="col span1"></div>
                <div class="col span1"></div>
                <div class="col span1"></div>
                <div class="col span1"></div>
                <div class="col span1"></div>
                <div class="col span1"></div>
                <div class="col span1"></div>
                <div class="col span1"></div>
                <div class="col span1"></div>
                <div class="col span1"></div>
                <div class="col span1"></div>
            </div>
            <div class="row">
                <div class="col span2"></div>
                <div class="col span2"></div>
                <div class="col span2"></div>
                <div class="col span2"></div>
                <div class="col span2"></div>
                <div class="col span2"></div>
            </div>
            <div class="row">
                <div class="col span3"></div>
                <div class="col span3"></div>
                <div class="col span3"></div>
                <div class="col span3"></div>
            </div>
            <div class="row">
                <div class="col span4"></div>
                <div class="col span4"></div>
                <div class="col span4"></div>
            </div>
            <div class="row">
                <div class="col span5"></div>
                <div class="col span5"></div>
                <div class="col span2"></div>
            </div>
            <div class="row">
                <div class="col span4"></div>
                <div class="col span8"></div>
            </div>
            <div class="row">
                <div class="col span6"></div>
                <div class="col span6"></div>
            </div>
            <div class="row">
                <div class="col span6"></div>
                <div class="col span4"></div>
                <div class="col...

SCSS

$gridColumnCount      : 10;   // Total column count
$gridGutterWidth      : 36;   // [in pixels]
$gridColumnPadding    : 0;   // [in pixels]
$gridMaxWidth         : 1200; // [in pixels]
$gridMargin           : 0;   // [in pixels] Space outside the grid

@function gridColumnWidth() {
    @return $gridMaxWidth / $gridColumnCount;
}
// Grid calculations
@function gridColumnWidthCalc($colNumber) {
    // Is correct
    @if $gridGutterWidth == 0 {
        @return percentage($colNumber / $gridColumnCount);
    }
    // Is incorrect
    @else {
        @return percentage( (($colNumber / $gridColumnCount) - gutterCalc(false) ) );
    }
}

// Accepts a number of columns that a  block should span.
// Returns a percentage width for that block.
@mixin columns($columnSpan: 1) {
    $number-of-blocks-in-container: $gridColumnCount / $columnSpan;
    $total-width-of-all-gutters:    gutterCalc(false) * ($number-of-blocks-in-container - 1);
    $total-width-of-all-blocks:     1 - $total-width-of-all-gutters;
    $width-of-a-single-block:       $total-width-of-all-blocks / $number-of-blocks-in-container;

    width:                          percentage( $width-of-a-single-block ); 
}

@function gutterCalc($showUnit: true) {
    @if $showUnit == true {
        @return percentage( $gridGutterWidth / $gridMaxWidth );
    } @else {
        @return $gridGutterWidth / ( $gridMaxWidth - ($gridMargin * 2) );
    }
}

@mixin gridColumn() {
    @if $gridGutterWidth > 0 {
        margin-left: gutterCalc();
    }
    @if $gridColumnPadding > 0 {
        padding: $gridColumnPadding + px;
    }
    float: left;
    min-height: 30px;
    position: relative;
    clear: none;
    &:first-child {
        margin-left: 0;
    }
    background-color: pink;
    border: 1px solid red;
}
@mixin clearfix {
    *zoom: 1;

    &:before,
    &:after {
        content: " ";
        display: table;
    }

    &:after {
        clear: both;
    }
}
@for $i from 1 to $gridColumnCount + 1 {
    .span#{$i}  {...