Generated by SassMeister.com.

SassMeister-input.scss

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

@mixin response-rule($property, $defaultValue, $responsiveValues) {
    & {
      #{$property}: $defaultValue;
    }
    @each $media, $value in $responsiveValues {
        @media #{$media} {
          & {
              #{$property}: $value;
          }
        }
    }
}
// ======== USAGE DEMO ==============
$desktop: "(min-width: 1200px)";
$mobile: "(min-width: 450px)";
$tablet: "(min-width: 750px)";

body {
   .p1 {
     @include response-rule("font-size", 16px, ($desktop: 20px, $tablet: 18px));
   }

   .p2 {
     @include response-rule("background-color", #fff, (
       $desktop: #ddd,
       $mobile: #eee,
       $tablet: #ccc
     ))
   }
 }

SassMeister-output.css

body .p1 {
  font-size: 16px;
}
@media (min-width: 1200px) {
  body .p1 {
    font-size: 20px;
  }
}
@media (min-width: 750px) {
  body .p1 {
    font-size: 18px;
  }
}
body .p2 {
  background-color: #fff;
}
@media (min-width: 1200px) {
  body .p2 {
    background-color: #ddd;
  }
}
@media (min-width: 450px) {
  body .p2 {
    background-color: #eee;
  }
}
@media (min-width: 750px) {
  body .p2 {
    background-color: #ccc;
  }
}