Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="wrap">
	<div class="full-bleed">
		<div class="carousel">Carousel</div>
	</div>
	<div class="grid">
		<main class="content"><h2>Content</h2></main>
		<aside class="sidebar"><h2>Sidebar</h2></aside>
    <div class="one-unit">1 Unit</div>
	</div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@import "breakpoint";
@import "susy";

//////////////////////////////
// VARIABLES: For layout breakpoints 
//////////////////////////////

// https://github.com/at-import/breakpoint/wiki/Respond-To
//$breakpoint-to-ems: true;

@include add-breakpoint("xx-large", (1120px));
@include add-breakpoint("x-large", (960px 1119px, 'no-query' true));
@include add-breakpoint("large", (768px 959px));
@include add-breakpoint("medium", (480px 767px));
@include add-breakpoint("small", (240px 479px));

$xx-large-layout: layout(1120px 14 1/4 fluid float split);
$x-large-layout: layout(960px 12 1/4 fluid float split);
$large-layout: layout(93.75% 9 1/4 fluid float split);
$medium-layout: layout(6 1/4 fluid float split);
$small-layout: layout(4 1/4 fluid float split);

$susy: (
	//columns: 14,
	//container: 1104px,
  //container-position: center,
  //gutters: 1/4,
	global-box-sizing: border-box,
	debug: (image: show, // show | hide
    color: rgba(red, .25),
    output: background // background | overlay
    )
); 

@include border-box-sizing;

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.grid {
	height: 80vh;
  background: rgba(#333,.5)
}

.content {
  height: 40vh;
  background: rgba(113, 218, 210, 0.8);
}
.sidebar {
  height: 40vh;
  background: rgba(250, 231, 179, 0.8);
}
.one-unit {
  background: #0f0;
}

.full-bleed {
  background: #f00;
}
h2 {
  padding: 1rem 0;
  text-align: center;
  color: #555;
}
.carousel {
  height: 10vh;
  background: #ff0;
}

.wrap {

  @include respond-to("small") {

    @include layout($small-layout);

    @include show-grid(4);
    @include container();
    .content, .sidebar {
      @include span(4 of 4);
    }
    .one-unit {
      @include span(1);
    }
  }

  @include respond-to("medium") {

    @include layout($medium-layout);

    @include show-grid(6);
    @include container();
 
    .content{ 
      @include span(4 of 6);
    }
    .sidebar {
      @include span(2 of 6);
    }
    .one-unit {
      @include span(1);
    }

  }


  @include respond-to("large") {

    @include layout($large-layout);

    .grid {
      @include show-grid(9);
      @include container();
    }
    .carousel {
      @include container();
    }
    .content {
      @include span(6 of 9);
    }
    .sidebar {
      @include span(3 of 9);
    }
    .one-unit {
      @include span(1);
    }
  }

    @include respond-to("x-large") {

    @include layout($x-large-layout);
  
    .grid {
      @include show-grid(12);
      @include container();
    }
    .content {
      @include span(8 of 12);
    }
    .sidebar {
      @include span(4 of 12);
    }
    .carousel {
      @include container();
    }
    .one-unit {
      @include span(1);
    }
  }

  @include respond-to("xx-large") {

    @include layout($xx-large-layout);

    .grid {
      @include show-grid(14);
      @include container();
    }
    .carousel {
      @include container();
    }
    .content {
      @include span(10 of 14);
    }
    .sidebar {
      @include span(4 of 14);
    }
    .one-unit {
      @include span(1);
    }
  }
}

SassMeister-output.css

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

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.grid {
  height: 80vh;
  background: rgba(51, 51, 51, 0.5);
}

.content {
  height: 40vh;
  background: rgba(113, 218, 210, 0.8);
}

.sidebar {
  height: 40vh;
  background: rgba(250, 231, 179, 0.8);
}

.one-unit {
  background: #0f0;
}

.full-bleed {
  background: #f00;
}

h2 {
  padding: 1rem 0;
  text-align: center;
  color: #555;
}

.carousel {
  height: 10vh;
  background: #ff0;
}

@media (min-width: 240px) and (max-width: 479px) {
  .wrap {
    background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
    background-size: 25%;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
    background-size: 25%;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
  }
  .wrap:after {
    content: " ";
    display: block;
    clear: both;
  }
  .wrap .content, .wrap .sidebar {
    width: 95%;
    float: left;
    margin-left: 2.5%;
    margin-right: 2.5%;
  }
  .wrap .one-unit {
    width: 20%;
    float: left;
    margin-left: 2.5%;
    margin-right: 2.5%;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  .wrap {
    background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
    background-size: 16.66667%;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
    background-size: 16.66667%;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
  }
  .wrap:after {
    content: " ";
    display: block;
    clear: both;
  }
  .wrap .content {
    width: 63.33333%;
    float: left;
    margin-left: 1.66667%;
    margin-right: 1.66667%;
  }
  .wrap .sidebar {
    width: 30%;
    float: left;
    margin-left: 1.66667%;
    margin-right: 1.66667%;
  }
  .wrap .one-unit {
    width: 13.33333%;
    float: left;
    margin-left: 1.66667%;
    margin-right: 1.66667%;
  }
}

@media (min-width: 768px) and (max-width: 959px) {
  .wrap .grid {
    background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
    background-size: 11.11111%;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
    max-width: 93.75%;
    margin-left: auto;
    margin-right: auto;
    background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
    background-size: 11.11111%;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
  }
  .wrap .grid:after {
    content: " ";
    display: block;
    clear: both;
  }
  .wrap .carousel {
    max-width: 93.75%;
    margin-left: auto;
    margin-right: auto;
    background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
    background-size: 11.11111%;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
  }
  .wrap .carousel:after {
    content: " ";
    display: block;
    clear: both;
  }
  .wrap .content {
    width: 64.44444%;
    float: left;
    margin-left: 1.11111%;
    margin-right: 1.11111%;
  }
  .wrap .sidebar {
    width: 31.11111%;
    float: left;
    margin-left: 1.11111%;
    margin-right: 1.11111%;
  }
  .wrap .one-unit {
    width: 8.88889%;
    float: left;
    margin-left: 1.11111%;
    margin-right: 1.11111%;
  }
}

@media (min-width: 960px) and (max-width: 1119px) {
  .wrap .grid {
    background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
    background-size: 8.33333%;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
    background-size: 8.33333%;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
  }
  .wrap .grid:after {
    content: " ";
    display: block;
    clear: both;
  }
  .wrap .content {
    width: 65%;
    float: left;
    margin-left: 0.83333%;
    margin-right: 0.83333%;
  }
  .wrap .sidebar {
    width: 31.66667%;
    float: left;
    margin-left: 0.83333%;
    margin-right: 0.83333%;
  }
  .wrap .carousel {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
    background-size: 8.33333%;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
  }
  .wrap .carousel:after {
    content: " ";
    display: block;
    clear: both;
  }
  .wrap .one-unit {
    width: 6.66667%;
    float: left;
    margin-left: 0.83333%;
    margin-right: 0.83333%;
  }
}

@media (min-width: 1120px) {
  .wrap .grid {
    background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
    background-size: 7.14286%;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
    background-size: 7.14286%;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
  }
  .wrap .grid:after {
    content: " ";
    display: block;
    clear: both;
  }
  .wrap .carousel {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    background-image: linear-gradient(to right, transparent 10%, rgba(255, 0, 0, 0.25) 10%, rgba(255, 77, 77, 0.25) 90%, transparent 90%);
    background-size: 7.14286%;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
  }
  .wrap .carousel:after {
    content: " ";
    display: block;
    clear: both;
  }
  .wrap .content {
    width: 70%;
    float: left;
    margin-left: 0.71429%;
    margin-right: 0.71429%;
  }
  .wrap .sidebar {
    width: 27.14286%;
    float: left;
    margin-left: 0.71429%;
    margin-right: 0.71429%;
  }
  .wrap .one-unit {
    width: 5.71429%;
    float: left;
    margin-left: 0.71429%;
    margin-right: 0.71429%;
  }
}

SassMeister-rendered.html

<div class="wrap">
	<div class="full-bleed">
		<div class="carousel">Carousel</div>
	</div>
	<div class="grid">
		<main class="content"><h2>Content</h2></main>
		<aside class="sidebar"><h2>Sidebar</h2></aside>
    <div class="one-unit">1 Unit</div>
	</div>
</div>