.row {
    @include clearfix;
}


@for $i from 1 through 12 {
    .col-#{$i} {
        width: percentage($i / 12);
        float: left;
        position: relative;
        box-sizing: border-box;
    }
    .col-offset-#{$i} {
        margin-left: percentage($i / 12);
    }
    .col-right-#{$i} {
        right: percentage($i / 12);
    }
    .col-left-#{$i} {
        left: percentage($i / 12);
    }
}

@for $i from 1 through 30 {
    .span-#{$i} {
        display: inline-block;
        width: 20 + ( ( $i - 1 ) * 30 ) + px;
        box-sizing: border-box;
    }
}