Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="row">
    <div class="col col-xs-4">
      <p>content</p>
        <div class="row">
    <div class="col col-xs-4">
      <div class="gutter">
        <p>content</p>
      </div>
    </div>
    <div class="col col-xs-4">
      <div class="gutter">
        <p>content</p>
      </div>
    </div>
  </div>
    </div>
    <div class="col col-xs-4">
      <div class="gutter-left">
        <p>content</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col col-xs-8">
      <p>content</p>
    </div>
  </div>
  <div class="row">
    <div class="col col-lg-1">
      <p>content</p>
    </div>
    <div class="col col-lg-1">
      <p>content</p>
    </div>
    <div class="col col-lg-1">
      <p>content</p>
    </div>
    <div class="col col-lg-1">
    <div class="gutter">
      <p>content</p>
    </div>
    </div>
    <div class="col col-lg-1">
      <p>content</p>
    </div>
    <div class="col col-lg-1">
    <div class="gutter">
            <p>content</p>
    </div>
    </div>
    <div class="col col-lg-1">
      <p>content</p>
    </div>
    <div class="col col-lg-1">
      <p>content</p>
    </div>
  </div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.0.2)
// ----

@charset "UTF-8";

// =============================================================================
// Gridsettings
// =============================================================================
// A Sass toolkit that creates responsive grids.
//
// Release Versions: https://github.com/ianrose/gridsettings/releases
// Github: https://github.com/ianrose/gridsettings
// License: The MIT License (MIT)
//
// Inspired by and used stuff from:
// https://github.com/twbs/bootstrap-sass
// https://github.com/kristoferjoseph/flexboxgrid

// Grid Type, either flexbox or float based
$flexbox-grid: true !default;

// Breakpoints TODO - Provide ability to generate any number of breakpoints
$screen-xs-min: 480px !default;
$screen-sm-min: 768px !default;
$screen-md-min: 992px !default;
$screen-lg-min: 1200px !default;
$screen-xs-max: ($screen-sm-min -1px) !default;
$screen-sm-max: ($screen-md-min - 1px) !default;
$screen-md-max: ($screen-lg-min - 1px) !default;

// Grid attributes
$grid-gutter: 24px !default;
$grid-columns: 8 !default;
$static-col-width: 300px !default;
$static-col-name: static !default;
$grid-col-name: col- !default;
$grid-xs-bp-name: xs- !default;
$grid-sm-bp-name: sm- !default;
$grid-md-bp-name: md- !default;
$grid-lg-bp-name: lg- !default;
$grid-push-name: push- !default;
$grid-pull-name: pull- !default;
$grid-offset-name: offset- !default;
$grid-container-name: container !default;
$grid-row-name: row !default;
$container-sm-width: 750px !default;
$container-md-width: 970px !default;
$container-lg-width: 1170px !default;

// Clearfix mixin
@mixin clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Centers the "container" on the page and clears floats.
@mixin make-container($flexbox-grid) {
  margin-right: auto;
  margin-left: auto;
  @if ($flexbox-grid == false) {
    @include clearfix();
  }
}

// Creates a wrapper for a series of columns and with negative margin allows
// first and last column to be flush left and right of container. Clears
// "column" floats.
@mixin make-row($flexbox-grid) {
  @if ($flexbox-grid) {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -ms-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

  } @else {
    @include clearfix();
  }
}

// Shared rules for all columns
.col {
  position: relative;
  @if ($flexbox-grid) {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-box-orient: vertical;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -ms-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 0;
    -ms-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
  } @else {
    min-height: 1px;
  }
}

// Sets the width of a column based on the columns index and its type ie
// width, pull, offset, or push.
@mixin calc-grid-column($index, $bp, $type, $flexbox-grid) {
  @if ($type == width) and ($index > 0) {
    .#{$grid-col-name}#{$bp}#{$index} {
      @if ($flexbox-grid) {
        -webkit-flex-basis: percentage(($index / $grid-columns));
        -ms-flex-preferred-size: percentage(($index / $grid-columns));
        flex-basis: percentage(($index / $grid-columns));
        max-width: percentage(($index / $grid-columns));
      } @else {
        width: percentage(($index / $grid-columns));
      }
    }
  }

  @if ($type == push) and ($index > 0) {
    .#{$grid-col-name}#{$bp}#{$grid-push-name}#{$index} {
      left: percentage(($index / $grid-columns));
    }
  }

  @if ($type == push) and ($index == 0) {
    .#{$grid-col-name}#{$bp}#{$grid-push-name}0 {
      left: auto;
    }
  }

  @if ($type == pull) and ($index > 0) {
    .#{$grid-col-name}#{$bp}#{$grid-pull-name}#{$index} {
      right: percentage(($index / $grid-columns));
    }
  }

  @if ($type == pull) and ($index == 0) {
    .#{$grid-col-name}#{$bp}#{$grid-pull-name}0 {
      right: auto;
    }
  }

  @if ($type == offset) {
    .#{$grid-col-name}#{$bp}#{$grid-offset-name}#{$index} {
      @if ($index > 0) {
        margin-left: percentage(($index / $grid-columns));
      } @else if ($index == 0) {
        margin-left: ($index / $grid-columns);
      }
    }
  }
}

// Float the column class based on breakpoint
@mixin float-grid-columns($bp, $flexbox-grid) {
  @if ($flexbox-grid == false) {
    $list: '';
    $i: 1;
    $list: ".#{$grid-col-name}#{$bp}#{$i}";
    @for $i from (1 + 1) through $grid-columns {
      $list: "#{$list}, .#{$grid-col-name}#{$bp}#{$i}";
    }
    #{$list} {
      float: left;
    }
  }
}

// Calculate column classes
@mixin loop-grid-columns($columns, $bp, $type, $flexbox-grid) {
  @for $i from 0 through $columns {
    @include calc-grid-column($i, $bp, $type, $flexbox-grid);
  }
}

// Make a grid based on breakpoint
@mixin make-grid($bp, $flexbox-grid) {
  // Generate width column classes for a breakpoint
  @include loop-grid-columns($grid-columns, $bp, width, $flexbox-grid);

  // Float columns for specified breakpoint and up
  @include float-grid-columns($bp, $flexbox-grid);

  // Generate push column classes for a breakpoint
  @include loop-grid-columns($grid-columns, $bp, push, $flexbox-grid);

  // Generate pull column classes for a breakpoint
  @include loop-grid-columns($grid-columns, $bp, pull, $flexbox-grid);

  // Generate offset column classes for a breakpoint
  @include loop-grid-columns($grid-columns, $bp, offset, $flexbox-grid);
}

@mixin make-static-fluid($bp) {
  .#{$grid-col-name}#{$bp}#{$static-col-name} {
    width: $static-col-width;
  }

  .fluid-#{$bp}wrapper {
    width: 100%;
  }

  .static-right .fluid-#{$bp}wrapper {
    float: left;
  }

  .static-left .fluid-#{$bp}wrapper {
    float: right;
  }

  .static-right {
    .#{$grid-col-name}#{$bp}fluid {
      margin-right: $static-col-width;

    }

    .#{$grid-col-name}#{$bp}#{$static-col-name} {
      float: left;
      margin-left: $static-col-width * -1;
    }
  }

  .static-left {
    .#{$grid-col-name}#{$bp}fluid {
      margin-left: $static-col-width;
    }

    .#{$grid-col-name}#{$bp}#{$static-col-name} {
      float: right;
      margin-right: $static-col-width * -1;
    }
  }
}

// TODO - later be part of optional generated CSS

html {
  box-sizing: border-box;
}

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

@include make-grid($grid-xs-bp-name, $flexbox-grid);
@include make-static-fluid($grid-xs-bp-name);

@if ($flexbox-grid) {
  .start-xs {
    justify-content: flex-start;
    text-align: start;
  }
  .center-xs {
    justify-content: center;
    text-align: center;
  }
  .end-xs {
    justify-content: flex-end;
    text-align: end;
  }
  .top-xs {
    align-items: flex-start;
  }
  .middle-xs {
    align-items: center;
  }
  .bottom-xs {
    align-items: flex-end;
  }
  .around-xs {
    justify-content: space-around;
  }
  .between-xs {
    justify-content: space-between;
  }
  .first-xs {
    order: -1;
  }
  .last-xs {
    order: 1;
  }
}

@media (min-width: $screen-sm-min) {
  @include make-grid($grid-sm-bp-name, $flexbox-grid);
  @include make-static-fluid($grid-sm-bp-name);
  @if ($flexbox-grid) {
    .start-sm {
      justify-content: flex-start;
      text-align: start;
    }
    .center-sm {
      justify-content: center;
      text-align: center;
    }
    .end-sm {
      justify-content: flex-end;
      text-align: end;
    }
    .top-sm {
      align-items: flex-start;
    }
    .middle-sm {
      align-items: center;
    }
    .bottom-sm {
      align-items: flex-end;
    }
    .around-sm {
      justify-content: space-around;
    }
    .between-sm {
      justify-content: space-between;
    }
    .first-sm {
      order: -1;
    }
    .last-sm {
      order: 1;
    }
  }
}

@media (min-width: $screen-md-min) {
  @include make-grid($grid-md-bp-name, $flexbox-grid);
  @include make-static-fluid($grid-md-bp-name);
  @if ($flexbox-grid) {
    .start-md {
      justify-content: flex-start;
      text-align: start;
    }
    .center-md {
      justify-content: center;
      text-align: center;
    }
    .end-md {
      justify-content: flex-end;
      text-align: end;
    }
    .top-md {
      align-items: flex-start;
    }
    .middle-md {
      align-items: center;
    }
    .bottom-md {
      align-items: flex-end;
    }
    .around-md {
      justify-content: space-around;
    }
    .between-md {
      justify-content: space-between;
    }
    .first-md {
      order: -1;
    }
    .last-md {
      order: 1;
    }
  }
}

@media (min-width: $screen-lg-min) {
  @include make-grid($grid-lg-bp-name, $flexbox-grid);
  @include make-static-fluid($grid-lg-bp-name);
  @if ($flexbox-grid) {
    .start-lg {
      justify-content: flex-start;
      text-align: start;
    }
    .center-lg {
      justify-content: center;
      text-align: center;
    }
    .end-lg {
      justify-content: flex-end;
      text-align: end;
    }
    .top-lg {
      align-items: flex-start;
    }
    .middle-lg {
      align-items: center;
    }
    .bottom-lg {
      align-items: flex-end;
    }
    .around-lg {
      justify-content: space-around;
    }
    .between-lg {
      justify-content: space-between;
    }
    .first-lg {
      order: -1;
    }
    .last-lg {
      order: 1;
    }
  }
}

.#{$grid-container-name}fluid {
  @include make-container($flexbox-grid);
}

.#{$grid-container-name} {
  @include make-container($flexbox-grid);

  @media (min-width: $screen-sm-min) {
    width: $container-sm-width;
    @include make-container($flexbox-grid);
  }
  @media (min-width: $screen-md-min) {
    width: $container-md-width;
  }
  @media (min-width: $screen-lg-min) {
    width: $container-lg-width;
  }
}

.#{$grid-row-name} {
  @include make-row($flexbox-grid);

  @media (min-width: $screen-sm-min) {
    @include make-row($flexbox-grid);
  }
}

.gutter {
  padding: $grid-gutter;
  background-color: lightgreen;
}

p {
  margin: 0;
  background-color: lightgrey;
}

SassMeister-output.css

.col {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -ms-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-flex: 0;
  -ms-box-flex: 0;
  -moz-box-flex: 0;
  -webkit-flex-grow: 0;
  -ms-flex-positive: 0;
  flex-grow: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0; }

html {
  box-sizing: border-box; }

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

.col-xs-1 {
  -webkit-flex-basis: 12.5%;
  -ms-flex-preferred-size: 12.5%;
  flex-basis: 12.5%;
  max-width: 12.5%; }

.col-xs-2 {
  -webkit-flex-basis: 25%;
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  max-width: 25%; }

.col-xs-3 {
  -webkit-flex-basis: 37.5%;
  -ms-flex-preferred-size: 37.5%;
  flex-basis: 37.5%;
  max-width: 37.5%; }

.col-xs-4 {
  -webkit-flex-basis: 50%;
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%; }

.col-xs-5 {
  -webkit-flex-basis: 62.5%;
  -ms-flex-preferred-size: 62.5%;
  flex-basis: 62.5%;
  max-width: 62.5%; }

.col-xs-6 {
  -webkit-flex-basis: 75%;
  -ms-flex-preferred-size: 75%;
  flex-basis: 75%;
  max-width: 75%; }

.col-xs-7 {
  -webkit-flex-basis: 87.5%;
  -ms-flex-preferred-size: 87.5%;
  flex-basis: 87.5%;
  max-width: 87.5%; }

.col-xs-8 {
  -webkit-flex-basis: 100%;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  max-width: 100%; }

.col-xs-push-0 {
  left: auto; }

.col-xs-push-1 {
  left: 12.5%; }

.col-xs-push-2 {
  left: 25%; }

.col-xs-push-3 {
  left: 37.5%; }

.col-xs-push-4 {
  left: 50%; }

.col-xs-push-5 {
  left: 62.5%; }

.col-xs-push-6 {
  left: 75%; }

.col-xs-push-7 {
  left: 87.5%; }

.col-xs-push-8 {
  left: 100%; }

.col-xs-pull-0 {
  right: auto; }

.col-xs-pull-1 {
  right: 12.5%; }

.col-xs-pull-2 {
  right: 25%; }

.col-xs-pull-3 {
  right: 37.5%; }

.col-xs-pull-4 {
  right: 50%; }

.col-xs-pull-5 {
  right: 62.5%; }

.col-xs-pull-6 {
  right: 75%; }

.col-xs-pull-7 {
  right: 87.5%; }

.col-xs-pull-8 {
  right: 100%; }

.col-xs-offset-0 {
  margin-left: 0; }

.col-xs-offset-1 {
  margin-left: 12.5%; }

.col-xs-offset-2 {
  margin-left: 25%; }

.col-xs-offset-3 {
  margin-left: 37.5%; }

.col-xs-offset-4 {
  margin-left: 50%; }

.col-xs-offset-5 {
  margin-left: 62.5%; }

.col-xs-offset-6 {
  margin-left: 75%; }

.col-xs-offset-7 {
  margin-left: 87.5%; }

.col-xs-offset-8 {
  margin-left: 100%; }

.col-xs-static {
  width: 300px; }

.fluid-xs-wrapper {
  width: 100%; }

.static-right .fluid-xs-wrapper {
  float: left; }

.static-left .fluid-xs-wrapper {
  float: right; }

.static-right .col-xs-fluid {
  margin-right: 300px; }
.static-right .col-xs-static {
  float: left;
  margin-left: -300px; }

.static-left .col-xs-fluid {
  margin-left: 300px; }
.static-left .col-xs-static {
  float: right;
  margin-right: -300px; }

.start-xs {
  justify-content: flex-start;
  text-align: start; }

.center-xs {
  justify-content: center;
  text-align: center; }

.end-xs {
  justify-content: flex-end;
  text-align: end; }

.top-xs {
  align-items: flex-start; }

.middle-xs {
  align-items: center; }

.bottom-xs {
  align-items: flex-end; }

.around-xs {
  justify-content: space-around; }

.between-xs {
  justify-content: space-between; }

.first-xs {
  order: -1; }

.last-xs {
  order: 1; }

@media (min-width: 768px) {
  .col-sm-1 {
    -webkit-flex-basis: 12.5%;
    -ms-flex-preferred-size: 12.5%;
    flex-basis: 12.5%;
    max-width: 12.5%; }

  .col-sm-2 {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%; }

  .col-sm-3 {
    -webkit-flex-basis: 37.5%;
    -ms-flex-preferred-size: 37.5%;
    flex-basis: 37.5%;
    max-width: 37.5%; }

  .col-sm-4 {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%; }

  .col-sm-5 {
    -webkit-flex-basis: 62.5%;
    -ms-flex-preferred-size: 62.5%;
    flex-basis: 62.5%;
    max-width: 62.5%; }

  .col-sm-6 {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%; }

  .col-sm-7 {
    -webkit-flex-basis: 87.5%;
    -ms-flex-preferred-size: 87.5%;
    flex-basis: 87.5%;
    max-width: 87.5%; }

  .col-sm-8 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%; }

  .col-sm-push-0 {
    left: auto; }

  .col-sm-push-1 {
    left: 12.5%; }

  .col-sm-push-2 {
    left: 25%; }

  .col-sm-push-3 {
    left: 37.5%; }

  .col-sm-push-4 {
    left: 50%; }

  .col-sm-push-5 {
    left: 62.5%; }

  .col-sm-push-6 {
    left: 75%; }

  .col-sm-push-7 {
    left: 87.5%; }

  .col-sm-push-8 {
    left: 100%; }

  .col-sm-pull-0 {
    right: auto; }

  .col-sm-pull-1 {
    right: 12.5%; }

  .col-sm-pull-2 {
    right: 25%; }

  .col-sm-pull-3 {
    right: 37.5%; }

  .col-sm-pull-4 {
    right: 50%; }

  .col-sm-pull-5 {
    right: 62.5%; }

  .col-sm-pull-6 {
    right: 75%; }

  .col-sm-pull-7 {
    right: 87.5%; }

  .col-sm-pull-8 {
    right: 100%; }

  .col-sm-offset-0 {
    margin-left: 0; }

  .col-sm-offset-1 {
    margin-left: 12.5%; }

  .col-sm-offset-2 {
    margin-left: 25%; }

  .col-sm-offset-3 {
    margin-left: 37.5%; }

  .col-sm-offset-4 {
    margin-left: 50%; }

  .col-sm-offset-5 {
    margin-left: 62.5%; }

  .col-sm-offset-6 {
    margin-left: 75%; }

  .col-sm-offset-7 {
    margin-left: 87.5%; }

  .col-sm-offset-8 {
    margin-left: 100%; }

  .col-sm-static {
    width: 300px; }

  .fluid-sm-wrapper {
    width: 100%; }

  .static-right .fluid-sm-wrapper {
    float: left; }

  .static-left .fluid-sm-wrapper {
    float: right; }

  .static-right .col-sm-fluid {
    margin-right: 300px; }
  .static-right .col-sm-static {
    float: left;
    margin-left: -300px; }

  .static-left .col-sm-fluid {
    margin-left: 300px; }
  .static-left .col-sm-static {
    float: right;
    margin-right: -300px; }

  .start-sm {
    justify-content: flex-start;
    text-align: start; }

  .center-sm {
    justify-content: center;
    text-align: center; }

  .end-sm {
    justify-content: flex-end;
    text-align: end; }

  .top-sm {
    align-items: flex-start; }

  .middle-sm {
    align-items: center; }

  .bottom-sm {
    align-items: flex-end; }

  .around-sm {
    justify-content: space-around; }

  .between-sm {
    justify-content: space-between; }

  .first-sm {
    order: -1; }

  .last-sm {
    order: 1; }
 }

@media (min-width: 992px) {
  .col-md-1 {
    -webkit-flex-basis: 12.5%;
    -ms-flex-preferred-size: 12.5%;
    flex-basis: 12.5%;
    max-width: 12.5%; }

  .col-md-2 {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%; }

  .col-md-3 {
    -webkit-flex-basis: 37.5%;
    -ms-flex-preferred-size: 37.5%;
    flex-basis: 37.5%;
    max-width: 37.5%; }

  .col-md-4 {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%; }

  .col-md-5 {
    -webkit-flex-basis: 62.5%;
    -ms-flex-preferred-size: 62.5%;
    flex-basis: 62.5%;
    max-width: 62.5%; }

  .col-md-6 {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%; }

  .col-md-7 {
    -webkit-flex-basis: 87.5%;
    -ms-flex-preferred-size: 87.5%;
    flex-basis: 87.5%;
    max-width: 87.5%; }

  .col-md-8 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%; }

  .col-md-push-0 {
    left: auto; }

  .col-md-push-1 {
    left: 12.5%; }

  .col-md-push-2 {
    left: 25%; }

  .col-md-push-3 {
    left: 37.5%; }

  .col-md-push-4 {
    left: 50%; }

  .col-md-push-5 {
    left: 62.5%; }

  .col-md-push-6 {
    left: 75%; }

  .col-md-push-7 {
    left: 87.5%; }

  .col-md-push-8 {
    left: 100%; }

  .col-md-pull-0 {
    right: auto; }

  .col-md-pull-1 {
    right: 12.5%; }

  .col-md-pull-2 {
    right: 25%; }

  .col-md-pull-3 {
    right: 37.5%; }

  .col-md-pull-4 {
    right: 50%; }

  .col-md-pull-5 {
    right: 62.5%; }

  .col-md-pull-6 {
    right: 75%; }

  .col-md-pull-7 {
    right: 87.5%; }

  .col-md-pull-8 {
    right: 100%; }

  .col-md-offset-0 {
    margin-left: 0; }

  .col-md-offset-1 {
    margin-left: 12.5%; }

  .col-md-offset-2 {
    margin-left: 25%; }

  .col-md-offset-3 {
    margin-left: 37.5%; }

  .col-md-offset-4 {
    margin-left: 50%; }

  .col-md-offset-5 {
    margin-left: 62.5%; }

  .col-md-offset-6 {
    margin-left: 75%; }

  .col-md-offset-7 {
    margin-left: 87.5%; }

  .col-md-offset-8 {
    margin-left: 100%; }

  .col-md-static {
    width: 300px; }

  .fluid-md-wrapper {
    width: 100%; }

  .static-right .fluid-md-wrapper {
    float: left; }

  .static-left .fluid-md-wrapper {
    float: right; }

  .static-right .col-md-fluid {
    margin-right: 300px; }
  .static-right .col-md-static {
    float: left;
    margin-left: -300px; }

  .static-left .col-md-fluid {
    margin-left: 300px; }
  .static-left .col-md-static {
    float: right;
    margin-right: -300px; }

  .start-md {
    justify-content: flex-start;
    text-align: start; }

  .center-md {
    justify-content: center;
    text-align: center; }

  .end-md {
    justify-content: flex-end;
    text-align: end; }

  .top-md {
    align-items: flex-start; }

  .middle-md {
    align-items: center; }

  .bottom-md {
    align-items: flex-end; }

  .around-md {
    justify-content: space-around; }

  .between-md {
    justify-content: space-between; }

  .first-md {
    order: -1; }

  .last-md {
    order: 1; }
 }

@media (min-width: 1200px) {
  .col-lg-1 {
    -webkit-flex-basis: 12.5%;
    -ms-flex-preferred-size: 12.5%;
    flex-basis: 12.5%;
    max-width: 12.5%; }

  .col-lg-2 {
    -webkit-flex-basis: 25%;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%; }

  .col-lg-3 {
    -webkit-flex-basis: 37.5%;
    -ms-flex-preferred-size: 37.5%;
    flex-basis: 37.5%;
    max-width: 37.5%; }

  .col-lg-4 {
    -webkit-flex-basis: 50%;
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%; }

  .col-lg-5 {
    -webkit-flex-basis: 62.5%;
    -ms-flex-preferred-size: 62.5%;
    flex-basis: 62.5%;
    max-width: 62.5%; }

  .col-lg-6 {
    -webkit-flex-basis: 75%;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%; }

  .col-lg-7 {
    -webkit-flex-basis: 87.5%;
    -ms-flex-preferred-size: 87.5%;
    flex-basis: 87.5%;
    max-width: 87.5%; }

  .col-lg-8 {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%; }

  .col-lg-push-0 {
    left: auto; }

  .col-lg-push-1 {
    left: 12.5%; }

  .col-lg-push-2 {
    left: 25%; }

  .col-lg-push-3 {
    left: 37.5%; }

  .col-lg-push-4 {
    left: 50%; }

  .col-lg-push-5 {
    left: 62.5%; }

  .col-lg-push-6 {
    left: 75%; }

  .col-lg-push-7 {
    left: 87.5%; }

  .col-lg-push-8 {
    left: 100%; }

  .col-lg-pull-0 {
    right: auto; }

  .col-lg-pull-1 {
    right: 12.5%; }

  .col-lg-pull-2 {
    right: 25%; }

  .col-lg-pull-3 {
    right: 37.5%; }

  .col-lg-pull-4 {
    right: 50%; }

  .col-lg-pull-5 {
    right: 62.5%; }

  .col-lg-pull-6 {
    right: 75%; }

  .col-lg-pull-7 {
    right: 87.5%; }

  .col-lg-pull-8 {
    right: 100%; }

  .col-lg-offset-0 {
    margin-left: 0; }

  .col-lg-offset-1 {
    margin-left: 12.5%; }

  .col-lg-offset-2 {
    margin-left: 25%; }

  .col-lg-offset-3 {
    margin-left: 37.5%; }

  .col-lg-offset-4 {
    margin-left: 50%; }

  .col-lg-offset-5 {
    margin-left: 62.5%; }

  .col-lg-offset-6 {
    margin-left: 75%; }

  .col-lg-offset-7 {
    margin-left: 87.5%; }

  .col-lg-offset-8 {
    margin-left: 100%; }

  .col-lg-static {
    width: 300px; }

  .fluid-lg-wrapper {
    width: 100%; }

  .static-right .fluid-lg-wrapper {
    float: left; }

  .static-left .fluid-lg-wrapper {
    float: right; }

  .static-right .col-lg-fluid {
    margin-right: 300px; }
  .static-right .col-lg-static {
    float: left;
    margin-left: -300px; }

  .static-left .col-lg-fluid {
    margin-left: 300px; }
  .static-left .col-lg-static {
    float: right;
    margin-right: -300px; }

  .start-lg {
    justify-content: flex-start;
    text-align: start; }

  .center-lg {
    justify-content: center;
    text-align: center; }

  .end-lg {
    justify-content: flex-end;
    text-align: end; }

  .top-lg {
    align-items: flex-start; }

  .middle-lg {
    align-items: center; }

  .bottom-lg {
    align-items: flex-end; }

  .around-lg {
    justify-content: space-around; }

  .between-lg {
    justify-content: space-between; }

  .first-lg {
    order: -1; }

  .last-lg {
    order: 1; }
 }

.containerfluid {
  margin-right: auto;
  margin-left: auto; }

.container {
  margin-right: auto;
  margin-left: auto; }
  @media (min-width: 768px) {
    .container {
      width: 750px;
      margin-right: auto;
      margin-left: auto; } }
  @media (min-width: 992px) {
    .container {
      width: 970px; } }
  @media (min-width: 1200px) {
    .container {
      width: 1170px; } }

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -ms-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -ms-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  @media (min-width: 768px) {
    .row {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -moz-box-orient: horizontal;
      -ms-box-orient: horizontal;
      -webkit-box-direction: normal;
      -moz-box-direction: normal;
      -ms-box-direction: normal;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; } }

.gutter {
  padding: 24px;
  background-color: lightgreen; }

p {
  margin: 0;
  background-color: lightgrey; }

SassMeister-rendered.html

<div class="container">
  <div class="row">
    <div class="col col-xs-4">
      <p>content</p>
        <div class="row">
    <div class="col col-xs-4">
      <div class="gutter">
        <p>content</p>
      </div>
    </div>
    <div class="col col-xs-4">
      <div class="gutter">
        <p>content</p>
      </div>
    </div>
  </div>
    </div>
    <div class="col col-xs-4">
      <div class="gutter-left">
        <p>content</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col col-xs-8">
      <p>content</p>
    </div>
  </div>
  <div class="row">
    <div class="col col-lg-1">
      <p>content</p>
    </div>
    <div class="col col-lg-1">
      <p>content</p>
    </div>
    <div class="col col-lg-1">
      <p>content</p>
    </div>
    <div class="col col-lg-1">
    <div class="gutter">
      <p>content</p>
    </div>
    </div>
    <div class="col col-lg-1">
      <p>content</p>
    </div>
    <div class="col col-lg-1">
    <div class="gutter">
            <p>content</p>
    </div>
    </div>
    <div class="col col-lg-1">
      <p>content</p>
    </div>
    <div class="col col-lg-1">
      <p>content</p>
    </div>
  </div>
</div>