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">
        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 class="l-2-col__right content_right l-region">
          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>

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 
  @include background-grid($color: blue)
  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(1em)
  @include sgs-change('gutter styles', 'fixed')
  //box-sizing: content-box
  .content__wrapper
    padding-top: 20px
    //+grid-background-12
  +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: yellow
      +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 {
  background-image: linear-gradient(to right, blue 0%, blue 6.77966%, #3f3fff 6.77966%, #3f3fff 8.47458%, blue 8.47458%, blue 15.25424%, #3f3fff 15.25424%, #3f3fff 16.94915%, blue 16.94915%, blue 23.72881%, #3f3fff 23.72881%, #3f3fff 25.42373%, blue 25.42373%, blue 32.20339%, #3f3fff 32.20339%, #3f3fff 33.89831%, blue 33.89831%, blue 40.67797%, #3f3fff 40.67797%, #3f3fff 42.37288%, blue 42.37288%, blue 49.15254%, #3f3fff 49.15254%, #3f3fff 50.84746%, blue 50.84746%, blue 57.62712%, #3f3fff 57.62712%, #3f3fff 59.32203%, blue 59.32203%, blue 66.10169%, #3f3fff 66.10169%, #3f3fff 67.79661%, blue 67.79661%, blue 74.57627%, #3f3fff 74.57627%, #3f3fff 76.27119%, blue 76.27119%, blue 83.05085%, #3f3fff 83.05085%, #3f3fff 84.74576%, blue 84.74576%, blue 91.52542%, #3f3fff 91.52542%, #3f3fff 93.22034%, blue 93.22034%, blue);
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
  *zoom: 1;
}
.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": 1em, "style": "fixed", "start row": true, "end row": false, "fixed gutter": true, "split gutter": false, "gutter property": "padding", "options": ((null: null)));
    width: 50%;
    float: left;
    margin-right: -100%;
    clear: none;
    padding-right: 1em;
  }
  .l-2-col .l-2-col__right {
    -sgs-span-settings: ("span": 6, "location": 7, "grid": 12, "gutter": 1em, "style": "fixed", "start row": false, "end row": true, "fixed gutter": true, "split gutter": false, "gutter property": "padding", "options": ((null: null)));
    width: 50%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
  }
}
@media (min-width: 45em) {
  .l-2-col .l-2-col__left {
    -sgs-span-settings: ("span": 9, "location": 1, "grid": 12, "gutter": 1em, "style": "fixed", "start row": true, "end row": false, "fixed gutter": true, "split gutter": false, "gutter property": "padding", "options": ((null: null)));
    width: 75%;
    float: left;
    margin-right: -100%;
    clear: none;
    padding-right: 1em;
    background: yellow;
    overflow: hidden;
    *zoom: 1;
  }
  .l-2-col .l-2-col__right {
    -sgs-span-settings: ("span": 3, "location": 10, "grid": 12, "gutter": 1em, "style": "fixed", "start row": false, "end row": true, "fixed gutter": true, "split gutter": false, "gutter property": "padding", "options": ((null: null)));
    width: 25%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    padding-right: 0;
    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">
        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 class="l-2-col__right content_right l-region">
          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>