Criação de um sistema de grade flexível usando bússola / SCSS

Vamos começar usando um sistema de grade estática existente

$width: 940;
$column: 60;
$gutter: 20;
$column-count: 12;

$mobile: 767px;

Em seguida, crie um mixin que irá configurar a coluna e largura da calha

@mixin grid-span($span){ 
    $flex-column: percentage($column/$width);
    $flex-gutter: percentage($gutter/$width);
    float: left;
    width: ($flex-column * $span) + ($flex-gutter * ($span - 1));
    margin-left: $flex-gutter;
    &:first-child{
        margin-left: 0;
    }
    @media screen and (max-width:$mobile) {
        width:auto;
        float:none;
        margin-left:0;
    }
}

Em seguida, execute um loop para criar todas as nossas classes de colunas de grade

@for $counter from 1 to $column-count {
    .span#{$counter} {
        @include grid-span($counter);
    }
}

Vamos criar um espaço reservado para clearfix

%clearfix{
    *zoom:1;
    &:after, &:before{
        display: table;
        line-height: 0;
        content: "";
    }
    &:after{
        clear: both;
    }
}

Vamos criar um espaço reservado para clearfix

.grid-row{
    width: 100%;
    @extend %clearfix;
}

Aqui está uma versão que fiz anteriormente.