Grade de porcentagens SASS simples

Grade percentual SASS

$max-width: 900px; // max width of main container
$total-columns: 12;  // total number of columns
$column-width: percentage( 75px / $max-width ); // columns are 75px wide
$gutter-width: percentage( 12px / $max-width ); // with 12px gutters

@function column( $column-size, $gutter: $gutter-width){
  @return $column-width * $column-size - $gutter-width;
}

.clearfix {
  zoom:1;
  &:before, &:after {
      content: "020";
      display: block;
      height: 0;
      overflow: hidden;
  }
  &:after {
      clear: both;
  }
}

.left{
  float: left;
}

.row{
  @extend .clearfix;
  margin-left: -$gutter-width;
}

.column{
  @extend .left;
  margin-left: $gutter-width;
}

@for $i from 1 through $total-columns {
  .col#{$i} {
    @extend .column;
    width: column($i);
  }
}

Então, para usar, tudo o que você precisa é um div com uma classe de linha e o número de colunas que você deseja.

<div class="row">
 <div class="col6">Here is a column</div>
 <div class="col6">Here is a column</div>
</div>

Sinta-se a vontade para deixar comentários! Este é apenas um sistema de rede básico que adoraria melhorar também.