Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="grid">
    <div class="red"></div>
  </div>
  <div class="grid">
    <div class="red"></div>
  </div>
  <div class="grid">
    <div class="red"></div>
  </div>
  <div class="grid">
    <div class="red"></div>
  </div>
  <div class="grid">
    <div class="red"></div>
  </div>
  <div class="grid">
    <div class="red"></div>
  </div>
  <div class="grid">
    <div class="red"></div>
  </div>
  <div class="grid">
    <div class="red"></div>
  </div>
  <div class="grid">
    <div class="red"></div>
  </div>
  <div class="grid">
    <div class="red"></div>
  </div>
  <div class="grid">
    <div class="red"></div>
  </div>
  <div class="grid">
    <div class="red"></div>
  </div>
</div>


<div class="container">
  <div class="third">
    <div class="red"></div>
  </div>
  <div class="two-thirds">
    <div class="nested">
      <div class="half">
        <div class="red"></div>
      </div>
      <div class="half">
        <div class="red"></div>
      </div>
    </div>
  </div>
</div>


<div class="fixed-width-container">
  <div class="quarter">
    <div class="red"></div>
  </div>
</div>


<div class="full-width-container">
  <div class="max-width-grid">
    <div class="red"></div>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.0.rc.2)
// Compass (v1.0.0.alpha.21)
// ----


/*------- {{ Reset box-sizing }} -------*/

*, *:before, *:after {
  box-sizing: border-box;
}


/*------- {{ Mobile-first true }} -------*/

// # Container map
$container: (
  ".container": (),
  ".nested": (
      nested: true
  ),
  ".fixed-width-container": (
    width: 300px 400px 700px 960px
  ),
  ".full-width-container": (
    width: auto
  )
);

// # Grid map
$grid: (
  ".grid": (
    width: 1/12
  ),
  ".third": (
    width: 1 1/2 false 1/3
  ),
  ".two-thirds": (
    width: 1 1/2 false 2/3
  ),
  ".half": (
    width: 1/2 1/4 1/3 1/2,
    offset-left: 0 1/4 0 0
  ),
  ".quarter": (
    width: 1/4,
    offset-left: 0 1/3 1/12 0,
    offset-right: 1/12 0 0 1/12,
    float: right left false right
  ),
  ".max-width-grid": (
    max-width: 600px,
    float: none
  )
);

// /*------- {{ Mobile-first false }} -------*/

// $mobile-first: false;
// $breakpoints: 991px 767px 479px;
// $gutters: 30px 24px 18px 10px;

// // # Container map
// $container: (
//   ".container": (),
//   ".nested": (
//     nested: true
//   ),
//   ".fixed-width-container": (
//     width: 960px 700px 400px 300px
//   ),
//   ".full-width-container": (
//     width: auto
//   )
// );

// // # Grid map
// $grid: (
//   ".grid": (
//     width: 1/12
//   ),
//   ".third": (
//     width: 1/3 1/2 false 1
//   ),
//   ".two-thirds": (
//     width: 2/3 1/2 false 1
//   ),
//   ".half": (
//     width: 1/2 1/3 1/4 1/2,
//     offset-left: 0 0 1/4 0
//   ),
//   ".quarter": (
//     width: 1/4,
//     offset-left: 0 1/12 1/3 0,
//     offset-right: 1/12 0 0 1/12,
//     float: right left false right
//   ),
//   ".max-width-grid": (
//     max-width: 600px,
//     float: none
//   )
// );


/*------- {{ Styles }} -------*/

$red: #ef4045;
$blue: #6490d9;

body {
  margin: 0;
}

.container, .fixed-width-container, .full-width-container {
  background: transparentize($red, .8);
  margin-bottom: 50px;
}

.nested {
  background: $blue;
}

.grid {
  border-left: 1px solid $red;
  border-right: 1px solid $red;
}

.red {
  height: 300px;
  background: $red;
}























// Rebar-Grid v0.1.0
// https://github.com/P233/Rebar-Grid
// Copyright (c) 2014 Peiwen Lu - Released under the MIT license.

// get-value.scss
@function get-value($map, $key, $bk) {
  @return if(length(map-get($map, $key)) >= $bk, nth(map-get($map, $key), $bk), false);
}

// default.scss
$max-width: 1170px !default;

$mobile-first: true !default;

$breakpoints: 480px 768px 992px !default;

$gutters: 10px 18px 24px 30px !default;

$media-feature: if($mobile-first, min-width, max-width);

// container-list.scss

$container-keys: map-keys($container);
$container-length: length($container-keys);

// # Collect the containers which have padding. They will be outputted together with grids.
$container-padding-list: ();

// # The container-list() function will generate a list of
// # $selector -> selector name
// # $nested -> if this container is a wrap of nested girds
// # $width -> if this contaienr has fixed width
// # if no value given, the default value is 'false'
@function container-list($bk) {
  $container-list: ();

  @for $i from 1 through $container-length {
    $container-key: nth($container-keys, $i);
    $container-entry: map-get($container, $container-key);
    $sub-list: $container-key;

    @if map-has-key($container-entry, nested) and length(map-get($container-entry, nested)) == 1 and map-get($container-entry, nested) {
      $sub-list: append($sub-list, true);
    } @else {
      $sub-list: append($sub-list, false);
    }

    @if map-has-key($container-entry, padding) and length(map-get($container-entry, padding)) == 1 and map-get($container-entry, padding) {
      $container-padding-list: append($container-padding-list, unquote($container-key), comma) !global;
    }

    @if map-has-key($container-entry, width) {
      $sub-list: append($sub-list, get-value($container-entry, width, $bk));
    } @else {
      $sub-list: append($sub-list, false);
    }

    $container-list: append($container-list, $sub-list, comma);
  }

  @return $container-list;
}

// grid-list.scss

$grid-keys: map-keys($grid);
$grid-length: length($grid-keys);

// # The grid-list() function will generate a list of
// # $selector -> selector name
// # $float -> float
// # $offset-left -> margin-left
// # $offset-right -> margin-right
// # $width -> width
// # $max-width -> max-width
// # $offset-only -> if this grid only has offset-left, offset-right, or both
// # if no value given, the default value is 'false'
@function grid-list($bk) {
  $grid-list: ();

  @for $i from 1 through $grid-length {
    $grid-key: nth($grid-keys, $i);
    $grid-entry: map-get($grid, $grid-key);
    $sub-list: $grid-key;

    @each $key in (float, offset-left, offset-right, width, max-width) {
      @if map-has-key($grid-entry, $key) {
        $sub-list: append($sub-list, get-value($grid-entry, $key, $bk));
      } @else {
        $sub-list: append($sub-list, false);
      }
    }

    // # If this grid only has offset-left, offset-right, or both.
    @if not map-has-key($grid-entry, float) and not map-has-key($grid-entry, width) and not map-has-key($grid-entry, max-width) {
      $sub-list: append($sub-list, true);
    } @else {
      $sub-list: append($sub-list, false);
    }

    $grid-list: append($grid-list, $sub-list, comma);
  }

  @return $grid-list;
}


// container.scss

@mixin container($bk) {
  $container-list: container-list($bk);
  $gutter: nth($gutters, $bk)/2;
  $selector-list: ();

  // @debug $container-list;

  @each $selector, $nested, $width in $container-list {
    #{$selector} {
      @if $bk == 1 {
        @if $nested {
          margin-left: -$gutter;
          margin-right: -$gutter;
        } @else {
          margin-left: auto;
          margin-right: auto;

          @if $width {
            width: $width;
          } @else {
            max-width: $max-width;
          }
        }

        $selector-list: append($selector-list, unquote($selector), comma);

      } @else {
        @if $nested {
          margin-left: -$gutter;
          margin-right: -$gutter;
        } @else if $width {
          width: $width;
        }
      }
    }
  }

  @if $bk == 1 {
    #{$selector-list} {
      &:after {
        content: "";
        display: table;
        clear: both;
      }
    }
  }
}

// grid.scss

@mixin grid($bk) {
  $grid-list: grid-list($bk);
  $selector-list: ();

  // @debug $grid-list;

  @each $selector, $float, $offset-left, $offset-right, $width, $max-width, $offset-only in $grid-list {

    #{$selector} {
      @if $bk == 1 and not $offset-only {
        float: if($float, $float, left);

        @if $max-width {
          max-width: if(unitless($max-width), percentage($max-width), $max-width);
        }
      } @else if $float {
        float: $float;
      }

      @if $offset-left {
        margin-left: if(unitless($offset-left), percentage($offset-left), $offset-left);
      }
      @if $offset-right {
        margin-right: if(unitless($offset-right), percentage($offset-right), $offset-right);
      }

      @if $width {
        width: if(unitless($width), percentage($width), $width);
      }
    }

    @if not $offset-only {
      $selector-list: append($selector-list, unquote($selector), comma);
    }
  }

  // # Output the selectors which have padding together.
  @if $container-padding-list != () or $selector-list != () {
    #{join($container-padding-list, $selector-list, comma)} {
      $gutter: nth($gutters, $bk)/2;
      padding-left: $gutter;
      padding-right: $gutter;
    }

    // # Reset $container-padding-list at each breakpoint.
    $container-padding-list: () !global;
  }
}

// output.scss

$loop-end: length($breakpoints) + 1;

@for $i from 1 through $loop-end {
  @if $i == 1 {
    @include container($i);
    @include grid($i);
  } @else {
    @media screen and ($media-feature: nth($breakpoints, $i - 1)) {
      @include container($i);
      @include grid($i);
    }
  }
}

SassMeister-output.css

/*------- {{ Reset box-sizing }} -------*/
*, *:before, *:after {
  box-sizing: border-box;
}

/*------- {{ Mobile-first true }} -------*/
/*------- {{ Styles }} -------*/
body {
  margin: 0;
}

.container, .fixed-width-container, .full-width-container {
  background: rgba(239, 64, 69, 0.2);
  margin-bottom: 50px;
}

.nested {
  background: #6490d9;
}

.grid {
  border-left: 1px solid #ef4045;
  border-right: 1px solid #ef4045;
}

.red {
  height: 300px;
  background: #ef4045;
}

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1170px;
}

.nested {
  margin-left: -5px;
  margin-right: -5px;
}

.fixed-width-container {
  margin-left: auto;
  margin-right: auto;
  width: 300px;
}

.full-width-container {
  margin-left: auto;
  margin-right: auto;
  width: auto;
}

.container:after, .nested:after, .fixed-width-container:after, .full-width-container:after {
  content: "";
  display: table;
  clear: both;
}

.grid {
  float: left;
  width: 8.33333%;
}

.third {
  float: left;
  width: 100%;
}

.two-thirds {
  float: left;
  width: 100%;
}

.half {
  float: left;
  margin-left: 0%;
  width: 50%;
}

.quarter {
  float: right;
  margin-left: 0%;
  margin-right: 8.33333%;
  width: 25%;
}

.max-width-grid {
  float: none;
  max-width: 600px;
}

.grid, .third, .two-thirds, .half, .quarter, .max-width-grid {
  padding-left: 5px;
  padding-right: 5px;
}

@media screen and (min-width: 480px) {
  .nested {
    margin-left: -9px;
    margin-right: -9px;
  }

  .fixed-width-container {
    width: 400px;
  }

  .third {
    width: 50%;
  }

  .two-thirds {
    width: 50%;
  }

  .half {
    margin-left: 25%;
    width: 25%;
  }

  .quarter {
    float: left;
    margin-left: 33.33333%;
    margin-right: 0%;
  }

  .grid, .third, .two-thirds, .half, .quarter, .max-width-grid {
    padding-left: 9px;
    padding-right: 9px;
  }
}
@media screen and (min-width: 768px) {
  .nested {
    margin-left: -12px;
    margin-right: -12px;
  }

  .fixed-width-container {
    width: 700px;
  }

  .half {
    margin-left: 0%;
    width: 33.33333%;
  }

  .quarter {
    margin-left: 8.33333%;
    margin-right: 0%;
  }

  .grid, .third, .two-thirds, .half, .quarter, .max-width-grid {
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media screen and (min-width: 992px) {
  .nested {
    margin-left: -15px;
    margin-right: -15px;
  }

  .fixed-width-container {
    width: 960px;
  }

  .third {
    width: 33.33333%;
  }

  .two-thirds {
    width: 66.66667%;
  }

  .half {
    margin-left: 0%;
    width: 50%;
  }

  .quarter {
    float: right;
    margin-left: 0%;
    margin-right: 8.33333%;
  }

  .grid, .third, .two-thirds, .half, .quarter, .max-width-grid {
    padding-left: 15px;
    padding-right: 15px;
  }
}

SassMeister-rendered.html

<div class="container">
  <div class="grid">
    <div class="red"></div>
  </div>
  <div class="grid">
    <div class="red"></div>
  </div>
  <div class="grid">
    <div class="red"></div>
  </div>
  <div class="grid">
    <div class="red"></div>
  </div>
  <div class="grid">
    <div class="red"></div>
  </div>
  <div class="grid">
    <div class="red"></div>
  </div>
  <div class="grid">
    <div class="red"></div>
  </div>
  <div class="grid">
    <div class="red"></div>
  </div>
  <div class="grid">
    <div class="red"></div>
  </div>
  <div class="grid">
    <div class="red"></div>
  </div>
  <div class="grid">
    <div class="red"></div>
  </div>
  <div class="grid">
    <div class="red"></div>
  </div>
</div>


<div class="container">
  <div class="third">
    <div class="red"></div>
  </div>
  <div class="two-thirds">
    <div class="nested">
      <div class="half">
        <div class="red"></div>
      </div>
      <div class="half">
        <div class="red"></div>
      </div>
    </div>
  </div>
</div>


<div class="fixed-width-container">
  <div class="quarter">
    <div class="red"></div>
  </div>
</div>


<div class="full-width-container">
  <div class="max-width-grid">
    <div class="red"></div>
  </div>
</div>