Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.6)
// Compass (v)
// ----

@import "compass";
@import "breakpoint";

// Dynamically check from 300 to/though 800 at every 99
// At every 99, write out a breakpoint.
// At each breakpoint reduce the negative number by 10px. (for left background position)

$min: 700px;
$max: 799px;
$bg-position: 0;

@while $min > 299px {
  @include breakpoint($min $max) { background-position: $bg-position 0; }
  $min: $min - 100;
  $max: $max - 100;
  $bg-position: $bg-position - 10px;
}

SassMeister-output.css

@media (min-width: 700px) and (max-width: 799px) {
  background-position: 0 0;
}
@media (min-width: 600px) and (max-width: 699px) {
  background-position: -10px 0;
}
@media (min-width: 500px) and (max-width: 599px) {
  background-position: -20px 0;
}
@media (min-width: 400px) and (max-width: 499px) {
  background-position: -30px 0;
}
@media (min-width: 300px) and (max-width: 399px) {
  background-position: -40px 0;
}