Sass responsive grid

_grid.scss

* {
    @include box-sizing(border-box);
}

/****************************************************\
    VARIABLES
\****************************************************/

$columns: 12 !default;
$gutter: 20px !default;
$container-padding: 15px !default;

$medium-break: 768px !default;
$large-break: 960px !default;
$extra-large-break: 1200px !default;

$small-label: 'sm' !default;
$medium-label: 'md' !default;
$large-label: 'lg' !default;
$extra-large-label: 'xl' !default;

/****************************************************\
    MIXINS
\****************************************************/

@mixin responsive-columns($suffix: '') {
    @if $suffix != '' {
        .#{$suffix}-hide { display: none; }
        $suffix: '-#{$suffix}';
    }@else {
        .hide { display: none; }
    }

    @for $i from 0 through $columns {
        @if $i != 0 {
            .col#{$suffix}-#{$i} { width: $i / $columns * 100%; }
        }
        .col#{$suffix}-push-#{$i} { left: $i / $columns * 100%; }
        .col#{$suffix}-offset-#{$i} { margin-left: $i / $columns * 100%; }
    }
    .col#{$suffix}-center { margin: 0 auto; float: none; }    
}

/****************************************************\
    EXTENDS
\****************************************************/

%container {
    padding: 0 $container-padding;
    margin: 0 auto;
}

%col {
    float: left;
    position: relative;
    min-height: 1px;
    padding: 0 $gutter * 0.5;
}

/****************************************************\
    CLASSES GENERIQUES
\****************************************************/

.container {
    @extend %container;
}

.container-fluid {
    @extend %container;
}

.row {
    margin: 0 $gutter * -0.5;
    @include clearfix;
}

/****************************************************\
    GRILLE
\****************************************************/

@for $i from 1 through $columns {
    .col-#{$i},
    .col-#{$small-label}-#{$i}, 
    .col-#{$medium-label}-#{$i}, 
    .col-#{$large-label}-#{$i}, 
    .col-#{$extra-large-label}-#{$i} 
    { @extend %col; }
}

/* SANS NOTION DE RESPONSIVE */
@include responsive-columns();
.container { width: 100%; }

/* PETITS ECRANS */
@include responsive-columns('#{$small-label}');
.container { width: 100%; }

/* ECRANS MEDIUM */
@media only screen and (min-width: $medium-break) {
    @include responsive-columns('#{$medium-label}');
    .container { width: $medium-break - 2* $container-padding; }  
}

/* ECRANS LARGES */
@media only screen and (min-width: $large-break) {
    @include responsive-columns('#{$large-label}');
    .container { width: $large-break - 2* $container-padding; }  
}

/* ECRANS EXTRA LARGES */
@media only screen and (min-width: $extra-large-break) {
    @include responsive-columns('#{$extra-large-label}');
    .container { width: $extra-large-break - 2* $container-padding; }   
}