Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="l-2-col">
    <div class="l-2-col__content content__wrapper l-region">
        <div class="l-2-col__left content_left l-region">
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non volutpat ex. Suspendisse id ultrices tellus. Nulla in tempus risus. Nam ut arcu eleifend, placerat sem vel, varius metus. Vestibulum vulputate massa ex. Cras elit eros, scelerisque vel scelerisque sit amet, imperdiet vel ante. Quisque quis nunc sed eros mattis convallis. Sed ut turpis risus.
Quisque eget molestie tortor, sed ultrices nisl. Vestibulum posuere, ex vitae condimentum cursus, augue eros facilisis ante, eget euismod eros diam sit amet dui. Suspendisse vestibulum sollicitudin sollicitudin. Aenean ut aliquam sapien. Proin velit velit, ornare vel efficitur vitae, cursus eget quam. Pellentesque efficitur neque quis facilisis mattis. Pellentesque ultricies est tellus, et congue justo finibus nec. Vestibulum suscipit eget tellus scelerisque lobortis. Aenean porta, nulla nec aliquam pretium, ex magna dictum libero, nec commodo urna elit non orci. Pellentesque ut auctor eros. Mauris viverra libero in magna consectetur, et condimentum augue faucibus. Nulla id nisi elit. Duis auctor facilisis neque vel eleifend. Cras rutrum lectus id condimentum hendrerit.
Nulla vitae leo vitae risus efficitur elementum nec ut metus. Donec varius quis tortor commodo dignissim. Vivamus rhoncus luctus dui, ut molestie orci vestibulum a. Phasellus lobortis tellus eu ligula lobortis malesuada. Pellentesque molestie, eros eget placerat ultricies, leo dolor feugiat turpis, vitae semper tellus justo ut justo. Cras quis fringilla sem. Vivamus aliquam massa velit, ac dignissim ipsum euismod nec. Pellentesque vitae cursus lacus. Nunc ornare nisi egestas dapibus venenatis. Proin eu ante facilisis, posuere risus ac, dignissim lectus. In sit amet lorem in metus efficitur tempus. Aliquam ac magna purus. Aliquam porta dignissim lectus a ullamcorper. Proin a sapien et magna fringilla malesuada ac ut massa. Ut nec dapibus libero. In lacinia commodo commodo.
        </div></div>
        <div class="l-2-col__right content_right l-region"><div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non volutpat ex. Suspendisse id ultrices tellus. Nulla in tempus risus. Nam ut arcu eleifend, placerat sem vel, varius metus. Vestibulum vulputate massa ex. Cras elit eros, scelerisque vel scelerisque sit amet, imperdiet vel ante. Quisque quis nunc sed eros mattis convallis. Sed ut turpis risus.
        </div></div>
    </div>
</div>

SassMeister-input.sass

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Singularity.gs (v1.4.0)
// ----

@import singularitygs
@import breakpoint
@import compass

$bp-xsmall: 35em
$bp-small: 45em
$bp-medium: 60em
$bp-large: 75em
$bp-xlarge: 85em

$offset: 30px
$grids: 12
$gutters: 20px

* 
  @include box-sizing('border-box')

@include sgs-change('debug', true)

.l-2-col 
  max-width: 900px
  margin: 0 auto

  +clearfix
  @include sgs-change('output', 'isolation')
  // Add a two column grid with a fixed 210px right column
  @include add-grid(12)
  @include add-gutter(20px)
  @include sgs-change('gutter styles', 'split' 'fixed')
  @include background-grid($color: #cc33ee)

  .content__wrapper
    padding-top: 20px

    
  +breakpoint(max-width $bp-xsmall)
    .l-2-col__top,
    .l-2-col__content,
    .l-2-col__bottom,
    .l-2-col__left,
    .l-2-col__right
      width: 100%
      clear: left
      float: left

 
  +breakpoint($bp-xsmall $bp-small)
    .l-2-col__left
      +grid-span(6, 1)

    .l-2-col__right
      +grid-span(6, 7)

  +breakpoint($bp-small)
    .l-2-col__left
      +grid-span(9, 1)
      //padding-right: ($gutter + $offset)
      background: #eee
      +clearfix
      
    .l-2-col__right
      +grid-span(3, 10)
      background: pink
      +clearfix

SassMeister-output.css

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.l-2-col {
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
  *zoom: 1;
  background-image: linear-gradient(to right, #d866f2, #d866f2 0%, #cc33ee 0%, #cc33ee 8.33333%, #d866f2 8.33333%, #d866f2 8.33333%, #ad2bca 8.33333%, #ad2bca 16.66667%, #d866f2 16.66667%, #d866f2 16.66667%, #cc33ee 16.66667%, #cc33ee 25.0%, #d866f2 25.0%, #d866f2 25.0%, #ad2bca 25.0%, #ad2bca 33.33333%, #d866f2 33.33333%, #d866f2 33.33333%, #cc33ee 33.33333%, #cc33ee 41.66667%, #d866f2 41.66667%, #d866f2 41.66667%, #ad2bca 41.66667%, #ad2bca 50.0%, #d866f2 50.0%, #d866f2 50.0%, #cc33ee 50.0%, #cc33ee 58.33333%, #d866f2 58.33333%, #d866f2 58.33333%, #ad2bca 58.33333%, #ad2bca 66.66667%, #d866f2 66.66667%, #d866f2 66.66667%, #cc33ee 66.66667%, #cc33ee 75.0%, #d866f2 75.0%, #d866f2 75.0%, #ad2bca 75.0%, #ad2bca 83.33333%, #d866f2 83.33333%, #d866f2 83.33333%, #cc33ee 83.33333%, #cc33ee 91.66667%, #d866f2 91.66667%, #d866f2 91.66667%, #ad2bca 91.66667%, #ad2bca 100.0%, #d866f2 100.0%, #d866f2 100.0%);
}
.l-2-col .content__wrapper {
  padding-top: 20px;
}
@media (max-width: 35em) {
  .l-2-col .l-2-col__top,
  .l-2-col .l-2-col__content,
  .l-2-col .l-2-col__bottom,
  .l-2-col .l-2-col__left,
  .l-2-col .l-2-col__right {
    width: 100%;
    clear: left;
    float: left;
  }
}
@media (min-width: 35em) and (max-width: 45em) {
  .l-2-col .l-2-col__left {
    -sgs-span-settings: ("span": 6, "location": 1, "grid": 12, "gutter": 20px, "style": "split", "start row": true, "end row": false, "fixed gutter": true, "split gutter": 1, "gutter property": "padding", "options": ((null: null)));
    width: 50%;
    float: left;
    margin-right: -100%;
    clear: none;
    padding-left: 10px;
    padding-right: 10px;
  }
  .l-2-col .l-2-col__right {
    -sgs-span-settings: ("span": 6, "location": 7, "grid": 12, "gutter": 20px, "style": "split", "start row": false, "end row": true, "fixed gutter": true, "split gutter": 1, "gutter property": "padding", "options": ((null: null)));
    width: 50%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (min-width: 45em) {
  .l-2-col .l-2-col__left {
    -sgs-span-settings: ("span": 9, "location": 1, "grid": 12, "gutter": 20px, "style": "split", "start row": true, "end row": false, "fixed gutter": true, "split gutter": 1, "gutter property": "padding", "options": ((null: null)));
    width: 75%;
    float: left;
    margin-right: -100%;
    clear: none;
    padding-left: 10px;
    padding-right: 10px;
    background: #eeeeee;
    overflow: hidden;
    *zoom: 1;
  }
  .l-2-col .l-2-col__right {
    -sgs-span-settings: ("span": 3, "location": 10, "grid": 12, "gutter": 20px, "style": "split", "start row": false, "end row": true, "fixed gutter": true, "split gutter": 1, "gutter property": "padding", "options": ((null: null)));
    width: 25%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-left: 10px;
    padding-right: 10px;
    background: pink;
    overflow: hidden;
    *zoom: 1;
  }
}

SassMeister-rendered.html

<div class="l-2-col">
    <div class="l-2-col__content content__wrapper l-region">
        <div class="l-2-col__left content_left l-region">
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non volutpat ex. Suspendisse id ultrices tellus. Nulla in tempus risus. Nam ut arcu eleifend, placerat sem vel, varius metus. Vestibulum vulputate massa ex. Cras elit eros, scelerisque vel scelerisque sit amet, imperdiet vel ante. Quisque quis nunc sed eros mattis convallis. Sed ut turpis risus.
Quisque eget molestie tortor, sed ultrices nisl. Vestibulum posuere, ex vitae condimentum cursus, augue eros facilisis ante, eget euismod eros diam sit amet dui. Suspendisse vestibulum sollicitudin sollicitudin. Aenean ut aliquam sapien. Proin velit velit, ornare vel efficitur vitae, cursus eget quam. Pellentesque efficitur neque quis facilisis mattis. Pellentesque ultricies est tellus, et congue justo finibus nec. Vestibulum suscipit eget tellus scelerisque lobortis. Aenean porta, nulla nec aliquam pretium, ex magna dictum libero, nec commodo urna elit non orci. Pellentesque ut auctor eros. Mauris viverra libero in magna consectetur, et condimentum augue faucibus. Nulla id nisi elit. Duis auctor facilisis neque vel eleifend. Cras rutrum lectus id condimentum hendrerit.
Nulla vitae leo vitae risus efficitur elementum nec ut metus. Donec varius quis tortor commodo dignissim. Vivamus rhoncus luctus dui, ut molestie orci vestibulum a. Phasellus lobortis tellus eu ligula lobortis malesuada. Pellentesque molestie, eros eget placerat ultricies, leo dolor feugiat turpis, vitae semper tellus justo ut justo. Cras quis fringilla sem. Vivamus aliquam massa velit, ac dignissim ipsum euismod nec. Pellentesque vitae cursus lacus. Nunc ornare nisi egestas dapibus venenatis. Proin eu ante facilisis, posuere risus ac, dignissim lectus. In sit amet lorem in metus efficitur tempus. Aliquam ac magna purus. Aliquam porta dignissim lectus a ullamcorper. Proin a sapien et magna fringilla malesuada ac ut massa. Ut nec dapibus libero. In lacinia commodo commodo.
        </div></div>
        <div class="l-2-col__right content_right l-region"><div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non volutpat ex. Suspendisse id ultrices tellus. Nulla in tempus risus. Nam ut arcu eleifend, placerat sem vel, varius metus. Vestibulum vulputate massa ex. Cras elit eros, scelerisque vel scelerisque sit amet, imperdiet vel ante. Quisque quis nunc sed eros mattis convallis. Sed ut turpis risus.
        </div></div>
    </div>
</div>