To demonstrate change of syntax in @mixin isolation-span. Generated by SassMeister.com.

SassMeister-input-HTML.html

<div id="middle">
  <section id="front-main-highlight" class="block">
    <article class="view-mode-main_highlight">
      <div class="main-image-container">
        <img src="http://placehold.it/5x2" class="main-image"/>
      </div>
      <h1 class="title">
        Main hightlight title
      </h1>
      <p class="lead">
        Lead placeholder text. This is the first block on the page, others should be below or to the right of this one.
      </p>
      <p class="read-more">Read more link »</p>
    </article>
  </section>
  <section id="front-news-listing" class="block">
    <ul class="article-listing news-listing">
      <li class="news-item">
        <article class="view-mode-listing">
          <h1 class="title">
            These three items
          </h1>
        </article>
      </li>
      <li class="news-item">
        <article class="view-mode-listing">
          <h1 class="title">
            should be in the right side
          </h1>
        </article>
      </li>
      <li class="news-item">
        <article class="view-mode-listing">
          <h1 class="title">
            at the top of the column.
          </h1>
        </article>
      </li>
    </ul>
  </section>
  <section id="front-blog-listing" class="block">
    <ul class="article-listing blog-listing">
      <li class="news-item">
        <article class="view-mode-listing">
          <h1 class="title">
            These three items
          </h1>
        </article>
      </li>
      <li class="news-item">
        <article class="view-mode-listing">
          <h1 class="title">
            should be on the right side
          </h1>
        </article>
      </li>
      <li class="news-item">
        <article class="view-mode-listing">
          <h1 class="title">
            at the bottom of the column.
          </h1>
        </article>
      </li>
    </ul>
  </section>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// Singularity.gs (v)
// ----

@import "singularitygs";

img {
  width: 100%;
}
#middle {
  max-width: 1280px;
  @include layout(16) {
    #front-main-highlight {
      @include isolation-span(8, 1, left);
    }
    #front-news-listing {
      @include isolation-span(8, 9, right);
    }
    #front-blog-listing {
      @include isolation-span(8, 9, 'right');
    }
  }
}

SassMeister-output.css

img {
  width: 100%;
}

#middle {
  max-width: 1280px;
}
#middle #front-main-highlight {
  width: 49.36709%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: left;
}
#middle #front-news-listing {
  width: 49.36709%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: right;
}
#middle #front-blog-listing {
  width: 49.36709%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: "right";
}

SassMeister-rendered.html

<div id="middle">
  <section id="front-main-highlight" class="block">
    <article class="view-mode-main_highlight">
      <div class="main-image-container">
        <img src="http://placehold.it/5x2" class="main-image"/>
      </div>
      <h1 class="title">
        Main hightlight title
      </h1>
      <p class="lead">
        Lead placeholder text. This is the first block on the page, others should be below or to the right of this one.
      </p>
      <p class="read-more">Read more link »</p>
    </article>
  </section>
  <section id="front-news-listing" class="block">
    <ul class="article-listing news-listing">
      <li class="news-item">
        <article class="view-mode-listing">
          <h1 class="title">
            These three items
          </h1>
        </article>
      </li>
      <li class="news-item">
        <article class="view-mode-listing">
          <h1 class="title">
            should be in the right side
          </h1>
        </article>
      </li>
      <li class="news-item">
        <article class="view-mode-listing">
          <h1 class="title">
            at the top of the column.
          </h1>
        </article>
      </li>
    </ul>
  </section>
  <section id="front-blog-listing" class="block">
    <ul class="article-listing blog-listing">
      <li class="news-item">
        <article class="view-mode-listing">
          <h1 class="title">
            These three items
          </h1>
        </article>
      </li>
      <li class="news-item">
        <article class="view-mode-listing">
          <h1 class="title">
            should be on the right side
          </h1>
        </article>
      </li>
      <li class="news-item">
        <article class="view-mode-listing">
          <h1 class="title">
            at the bottom of the column.
          </h1>
        </article>
      </li>
    </ul>
  </section>
</div>