Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

// content for all query modifiers map (name: query)
@mixin vary-query($queries, $none: true) {
  $prev: $VARY__OPENED;

  // No query modifier
  @if ($none) {
    $VARY__OPENED: append($VARY__OPENED, null)!global;
    @content;
    $VARY__OPENED: $prev!global;
  }

  @each $name, $query in $queries {
    $VARY__OPENED: append($VARY__OPENED, $name)!global;
    @media #{$query} {
      @content;
    }
    $VARY__OPENED: $prev!global;
  }
}

// return current modifier (query) name
@function vary-modifier($before: '', $after: '') {
  $modifier: '';

  @if length($VARY__OPENED) > 0 {
    $name: nth($VARY__OPENED, length($VARY__OPENED));

    @if $name {
      $modifier: '#{$before}#{$name}#{$after}';
    }
  }
  @return $modifier;
}

// Store currently opened modifiers
$VARY__OPENED: ();

// DEMO
$queries: (
  medium: '(max-width: 1000px)',
  small:  '(max-width: 500px)'
);
.cell {
  width: 100%/3;

  @include vary-query($queries) {
    $prefix: vary-modifier('-');

    // SPAN
    @for $i from 1 through 3 {
      &.\--span-#{$i}#{$prefix} {
        width: 100%/3 * $i;
      }
    }
  }
}

SassMeister-output.css

.cell {
  width: 100%/3;
}
.cell.\--span-1 {
  width: 33.33333%;
}
.cell.\--span-2 {
  width: 66.66667%;
}
.cell.\--span-3 {
  width: 100%;
}
@media (max-width: 1000px) {
  .cell.\--span-1-medium {
    width: 33.33333%;
  }
  .cell.\--span-2-medium {
    width: 66.66667%;
  }
  .cell.\--span-3-medium {
    width: 100%;
  }
}
@media (max-width: 500px) {
  .cell.\--span-1-small {
    width: 33.33333%;
  }
  .cell.\--span-2-small {
    width: 66.66667%;
  }
  .cell.\--span-3-small {
    width: 100%;
  }
}