Generated by SassMeister.com.

SassMeister-input.scss

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

// RANGES
// We use these functions to define ranges for various things, like media queries.
@function lower-bound($range){
  @if length($range) <= 0 {
    @return 0;
  }
  @return nth($range,1);
}

@function upper-bound($range) {
  @if length($range) < 2 {
    @return 999999999999;
  }
  @return nth($range, 2);
}



// Media Query Ranges
$small-range: (0, 40em) !default;
$medium-range: (40.063em, 64em) !default;
$large-range: (64.063em, 90em) !default;
$xlarge-range: (90.063em, 120em) !default;
$xxlarge-range: (120.063em, 99999999em) !default;


$screen: "only screen" !default;

$landscape: "#{$screen} and (orientation: landscape)" !default;
$portrait: "#{$screen} and (orientation: portrait)" !default;

$small-up: $screen !default;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;

$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;

$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;


// ---------------------------

$mq-widths: (small medium large);
$mq-ranges: ($small-range, $medium-range, $large-range);

@function define-mq-map($width, $range) {
  @return ($width: (
    range: $range,
    min: lower-bound($range),
    max: upper-bound($range)));
}

$mq: ();
@each $width, $range in zip($mq-widths, $mq-ranges) {
  $mq: map-merge($mq, (define-mq-map($width, $range)));
}

@function first($list) { @return nth($list, 1); }
@function second($list) { @return nth($list, 2); }
@function last($list) { @return nth($list, -1); }
@function rest($list) {
  $r: ();
  @if length($list) < 2 { @return (); }
  @for $i from 2 through length($list) {
    $r: append($r, nth($list, $i));
  }
  @return $r;
}

@function unpack($varargs) {
  @if length($varargs) == 0 { @return (); }
  @if length($varargs) == 1 {
    @if type-of(first($varargs)) == list {
      @return first($varargs);
    } @else {
      @return $varargs;
    }
  }
  @return $varargs;
}

@function map-dive($map, $keys...) {
  $keys: unpack($keys);
  @if length($keys) == 0 { @return $map; }
  @if type-of($map) != map {
    @return null;
  }
  $key: first($keys);
  @if not map-has-key($map, $key) {
    @return null;
  }
  @return map-dive(map-get($map, $key), rest($keys));
}

@function above($width) {
  @return "(max-width: #{mq($width, max)})";
}

@function below($width) {
  @return "(min-width: #{mq($width, min)})";
}

@function mq($keys...) {
  @return map-dive($mq, $keys...);
}

@mixin only-screen { @media #{$screen} { @content; } }

@function str-join($strings...) {
  $r: first($strings);
  @for $i from 2 through length($strings) {
    $r: $r + " and " + nth($strings, $i);
  }
  @return $r
}

@mixin media($conditions...) {
  $query: str-join($conditions...);
  @media #{$query} { @content; }
}

.small {
  font-family: mq-max-width(small);
  font-family: map-dive($mq, small, range);
  font-family: mq(small min-width);
  
  width: mq(small max);
  
  @include only-screen {
    width: mq(small min);
  }
  
  @media #{above(small)} {
    width: 22em;
  }
  
  font-family: str-join(a, b, c);
  
  @include media(only screen, above(small), below(medium)) {
    width: 100px;
  }

}

$small-zero: lower-bound(first($mq-ranges)) <= 0;

$lower-bounds: ();
@each $range in $mq-ranges {
  $lower-bounds: append($lower-bounds, lower-bound($range));
}

@mixin responsive($rulesets...) {
  $rules: ();
  @each $min in $lower-bounds {
    $rules: map-merge($rules, ($min: ()));
  }
  @each $ruleset in $rulesets {
    $property: first($ruleset);
    $values: rest($ruleset);
    @if type-of($values) == map {
      
    }
    $mapped-values: zip($lower-bounds, $values);
    @each $min, $value in $mapped-values {
      $rule: ($property, $value);
      $rules-for-min: map-get($rules, $min);
      $rules-for-min: append($rules-for-min, $rule);
      $rules: map-merge($rules, ($min: $rules-for-min));
    }
  }
  @each $min, $rules-for-min in $rules {
    @if $min == 0 {
      @each $rule in $rules-for-min {
        #{first($rule)}: #{second($rule)};
      }
    } @else {
        @media #{$screen} and (min-width: #{$min}) {
          @each $rule in $rules-for-min {
            #{first($rule)}: #{second($rule)};
          }
        }
    }
  }
}

.another {
  @include responsive(
    //line-height (medium: 1.1, large: 1.4),
    font-size 1rem 2rem 3rem,
    font-weight normal bold
  );
}

SassMeister-output.css

.small {
  font-family: mq-max-width(small);
  font-family: 0, 40em;
  width: 40em;
  font-family: a and b and c;
}
@media only screen {
  .small {
    width: 0;
  }
}
@media (max-width: 40em) {
  .small {
    width: 22em;
  }
}
@media only screen and (max-width: 40em) and (min-width: 40.063em) {
  .small {
    width: 100px;
  }
}

.another {
  font-size: 1rem;
  font-weight: normal;
}
@media only screen and (min-width: 40.063em) {
  .another {
    font-size: 2rem;
    font-weight: bold;
  }
}
@media only screen and (min-width: 64.063em) {
  .another {
    font-size: 3rem;
  }
}