Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="col1">
  Column 1
</div>
<div class="col2">
  Column 2
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Susy (v2.1.3)
// ----

@import "susy";
@import "breakpoint";
$susy: (
  columns: 12
  );
  
@mixin bp-span($grid, $breakpoint) {
  @include breakpoint($breakpoint) {
    @include span($grid);
  }
}
$breakpoint-var: (min-height 1000px) (orientation portrait);

.col1 {
  @include bp-span( 2 of 3, 300px max-width);
  @include bp-span(last 6 of 12, 600px 800px);
  @include bp-span(last 3 of 12, $breakpoint-var);
}

SassMeister-output.css

@media (max-width: 300px) {
  .col1 {
    width: 64.28571%;
    float: left;
    margin-right: 7.14286%;
  }
}
@media (min-width: 600px) and (max-width: 800px) {
  .col1 {
    width: 49.15254%;
    float: right;
    margin-right: 0;
  }
}
@media (min-height: 1000px) and (orientation: portrait) {
  .col1 {
    width: 23.72881%;
    float: right;
    margin-right: 0;
  }
}

SassMeister-rendered.html

<div class="col1">
  Column 1
</div>
<div class="col2">
  Column 2
</div>