Generated by SassMeister.com.

SassMeister-input.scss

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

/* Media query breakpoints */
$mw576: "(min-width: 576px)";
$mw768: "(min-width: 768px)";
$mw992: "(min-width: 992px)";
$mw1200: "(min-width: 1200px)";
$maxw600: "(max-width: 600px)";
$maxw1024: "(max-width: 1024px)";

/* Container*/
$container-max-width: ($mw576: 540px, $mw768: 720px, $mw992: 960px, $mw1200: 1140px);

/* Padding|Margins */
$pl: ('default': 15px, $mw576: 30px, $mw768: 30px, $mw992: 15px, $mw1200: 15px);
$pr: ('default': 15px, $mw576: 30px, $mw768: 30px, $mw992: 15px, $mw1200: 15px);

/* Typography */
$title1-fz: ('default': 30px, $mw576: 32px, $mw768: 36px, $mw992: 48px, $mw1200: 48px);
$title2-fz: ('default': 36px, $mw576: 36px, $mw768: 36px, $mw992: 48px, $mw1200: 48px);  //**//
$title3-fz: ('default': 26px, $mw576: 26px, $mw768: 26px, $mw992: 30px, $mw1200: 30px);
$title4-fz: ('default': 36px, $mw576: 36px, $mw768: 36px, $mw992: 48px, $mw1200: 48px);  //**//
$title5-fz: ('default': 20px, $mw576: 20px, $mw768: 20px, $mw992: 24px, $mw1200: 24px);
$title6-fz: ('default': 36px, $mw576: 36px, $mw768: 36px, $mw992: 48px, $mw1200: 48px);  //**//

$title1-lh: ('default': 32px, $mw576: 32px, $mw768: 36px, $mw992: 48px, $mw1200: 48px);
$title2-lh: ('default': 36px, $mw576: 36px, $mw768: 36px, $mw992: 48px, $mw1200: 48px);  //**//
$title3-lh: ('default': 28px, $mw576: 28px, $mw768: 28px, $mw992: 36px, $mw1200: 36px);
$title4-lh: ('default': 36px, $mw576: 36px, $mw768: 36px, $mw992: 48px, $mw1200: 48px);  //**//
$title5-lh: ('default': 23px, $mw576: 23px, $mw768: 23px, $mw992: 29px, $mw1200: 29px);
$title6-lh: ('default': 36px, $mw576: 36px, $mw768: 36px, $mw992: 48px, $mw1200: 48px);  //**//

$body-fz: ('default': 16px, $mw576: 16px, $mw768: 16px, $mw992: 18px, $mw1200: 18px);
$body-lh: ('default': 25px, $mw576: 25px, $mw768: 25px, $mw992: 31px, $mw1200: 31px);

@mixin container($responsiveValues) {
  & {
    margin: 0 auto;
    padding-left: map-get($pl, "default");
    padding-right: map-get($pr, "default");    
  }
  @each $media, $value in $responsiveValues {
    @media #{$media} {
      & {
        max-width: $value;
        padding-left: map-get($pl, $media);
        padding-right: map-get($pr, $media);            
      }
    }
  }

}
.Container{
  @include container($container-max-width);
}
@media #{$mw576} {
  .Class {
    font-size:20px;
  }
}

/* Response a rule */
@mixin response-rule($property, $defaultValue, $responsiveValues: ()) {
  @if $defaultValue {
    & {
      #{$property}: $defaultValue;
    }
  }
  @else {
    & {
      #{$property}: map-get($responsiveValues, "default");
    }  
  }
  @each $media, $value in $responsiveValues {
    @if $media != "default" {
      @media #{$media} {
        & {
          #{$property}: $value;
        }
      }
    }
  }
}

.CLASS {
  @include response-rule("font-size", null, $title1-fz);
}

SassMeister-output.css

/* Media query breakpoints */
/* Container*/
/* Padding|Margins */
/* Typography */
.Container {
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 576px) {
  .Container {
    max-width: 540px;
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (min-width: 768px) {
  .Container {
    max-width: 720px;
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (min-width: 992px) {
  .Container {
    max-width: 960px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 1200px) {
  .Container {
    max-width: 1140px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (min-width: 576px) {
  .Class {
    font-size: 20px;
  }
}
/* Response a rule */
.CLASS {
  font-size: 30px;
}
@media (min-width: 576px) {
  .CLASS {
    font-size: 32px;
  }
}
@media (min-width: 768px) {
  .CLASS {
    font-size: 36px;
  }
}
@media (min-width: 992px) {
  .CLASS {
    font-size: 48px;
  }
}
@media (min-width: 1200px) {
  .CLASS {
    font-size: 48px;
  }
}