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.