Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// Susy (v2.1.2)
// ----

@import "susy";


// Set a column-width, so we can calculate a layout for you
$susy: (
  column-width: 4em,
);


// Return a column-count based on a given width
@function mq-layout(
  $mq
) {
  $columns: susy-get(column-width);
  
  @if $columns and comparable($mq, $columns) {
    $gutters: susy-get(gutters) * $columns;
    @return ceil(($mq + $gutters) / ($columns + $gutters));
  } @else {
    @warn "Can't determine layout, becuse #{$mq} and #{$columns} (column-width) are not comparable.";
    @return $susy;
  }
}


// Set up a media-query block, using a new layout
@mixin mq-layout(
  $mq,
  $layout: false
) {
  @if not $layout {
    @if type-of($mq) == number {
      $layout: mq-layout($mq);
    } @else {
      $layout: $susy;
    }
  }

  $mq: if(type-of($mq) == number, 'min-width: #{$mq}', $mq);
  
  @media ($mq) {
    @include with-layout($layout) {
      @content;
    }
  }
}

// DEMO!
.test {
  @include span(4);
  @include mq-layout(45em) {
    @include span(4);
    -susy-columns: susy-get(columns);
  }
  @include mq-layout(60em) {
    @include span(4);
    -susy-columns: susy-get(columns);
  }
}

SassMeister-output.css

.test {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}
@media (min-width: 45em) {
  .test {
    width: 38.77551%;
    float: left;
    margin-right: 2.04082%;
    -susy-columns: 10;
  }
}
@media (min-width: 60em) {
  .test {
    width: 29.6875%;
    float: left;
    margin-right: 1.5625%;
    -susy-columns: 13;
  }
}