Simple Responsive Grid - Simple SASS mixin generating a grid with nesting and offseting enabled for super quick prototypes. To do: properly clear first in row A CodePen by Cristina Solana

index.html

<div class="container">

<header>
<code>
  .mod--foo {
    @include column-span(6, 3);
  } 
  <br>// $column-count, $offset[optional]
  <br>// To do: properly clear first in row
</code>
</header>
  
<section>
    <div class="mod--foo">
        <code>.mod--foo</code>
    </div>
    <div class="mod--bar">
        <code>.mod--bar</code>
    </div>
</section>

<section>
    <div class="mod--one">
        <code>.mod--one</code>
    </div>
    <div class="mod--two">
        <code>.mod--two</code>
    </div>

    <div class="mod--three">
        <code>.mod--three</code>
    </div>
    <div class="mod--four">
        <code>.mod--four</code>
    </div>
    <div class="mod--five">
        <code>.mod--five</code>
    </div>
    <div class="mod--six">
        <code>.mod--six</code>
    </div>
    <div class="mod--seven">
        <code>.mod--seven</code>
    </div>
    <div class="mod--eight">
        <code>.mod--eight</code>
    </div>
    <div class="mod--nine">
        <code>.mod--nine</code>
    </div>
    <div class="mod--ten">
        <code>.mod--ten</code>
    </div>
    <div class="mod--eleven">
        <code>.mod--eleven</code>
    </div>
    <div class="mod--twelve">
        <code>.mod--twelve</code>
    </div>
</section>
</div>

style.scss

@import "compass";
// Aesthetics
body { font-family: sans-serif; }
.container { padding: 2em }
header { box-sizing: border-box; margin-bottom: 1em; padding: 1em; background-color: #eee; }
code { font-family: monospace; }

// Variables 

$total-columns: 12; // No. of Columns
$margins: 1%; // Column Margins: left and right
$padding: 1%; // Column padding

// Mixin
@mixin column-span($column-span, $push:0) { 
  
  $grid-width:    100%;
  $column-calc: ($grid-width / $total-columns * $column-span); 
  $column-width: $column-calc - ($margins * 2); 
  $offset: ($column-calc) / ($column-span) * $push + $margins;
  @include box-sizing(border-box);
  // MARGINS NEED TO BE ADDED FOR OFFSET
  float: left;
  width: $column-width; 
  padding: $padding;
  @if $push == 0 {
    margin: $margins;
  } @else {
    margin: $margins;
    margin-left: $offset;
  }
  // for testing only below
  outline: 1px dashed #f06;
    
}

// Layout Test

// Mobile First

.mod--foo {
  @include column-span(5)
}
.mod--bar {
  @include column-span(7)
}
/* Start new row */
  .mod--one {
    @include column-span(6);
  }
  .mod--two {
    @include column-span(6);
  }
/* Start new row */
  .mod--three {
     @include column-span(4);
  }
  .mod--four {
    @include column-span(4);
  }
  .mod--five {
    @include column-span(4);
  }
/* Start new row */
  .mod--six {
    @include column-span(3);
  }
  .mod--seven {
    @include column-span(3);
  }
  .mod--eight {
    @include column-span(3);
  }
  .mod--nine {
    @include column-span(3);
  }
/* Start new row */
  .mod--ten {
    @include column-span(12);
  }
/* Start new row */
  .mod--eleven {
    @include column-span(9);
  }
  .mod--twelve {
    @include column-span(3);
  }

@media all and (min-width: (750/14)+em) {

  .mod--foo {
    @include column-span(5)
  }
  .mod--bar {
    @include column-span(5, 2)
  }
/* Start new row */
  .mod--one {
    @include column-span(3,1);
  }
  .mod--two {
    @include column-span(4);
  }
  .mod--three {
     @include column-span(3);
  }
/* Start new row */
  .mod--four {
    @include column-span(3);
  }
  .mod--five {
    @include column-span(2,1);
  }
  .mod--six {
    @include column-span(2);
  }
  .mod--seven {
    @include column-span(3,1);
  }
/* Start new row */
  .mod--eight {
    @include column-span(6);
  }
  .mod--nine {
    @include column-span(6);
  }
/* Start new row */
  .mod--ten {
    @include column-span(3, 3);
  }
  .mod--eleven {
    @include column-span(3);
  }
/* Start new row */
  .mod--twelve {
    @include column-span(4, 4);
  }
  
}

?