Cacher is the code snippet organizer for pro developers

.nope {
  font-size: 1.6em;
}

.yep {
  font-size: 1.6em;
}
@media (min-width: 480px) {
  .yep {
    font-size: 2em;
  }
}

// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// ----

$breakpoints: (
  small: 320px,
  medium: 480px,
  large: 960px,
  xlarge: 1200px
);
@function get_bp($label) {
  @return map-get($breakpoints, $label);
}
@function round-num($num) {
  @return round($num*100)/100;
}
@mixin bp($name) {
    @if not map-has-key($breakpoints, $name) {
        @warn "Invalid breakpoint `#{$name}`.";
    } @else {
        @if map-get($breakpoints, $name) {
            @media (min-width: map-get($breakpoints, $name)) {
                @content;
            }
        } @else {
            @content;
        }
    }
}
@mixin spread-value($property, $value-start, $value-end, $bp-start: small, $bp-end: xlarge) {
 
  @if type-of($value-start) != number or type-of($value-end) != number {
    @warn "Either $value-start or $value-end is not a number: `#{$value-start}` | `#{$value-end}`"
  } @else {
    #{$property}: #{$value-start};
    $value-distance: $value-end - $value-start;
    $bp-distance: get_bp($bp-end) - get_bp($bp-start);
    $bp-keys: map-keys($breakpoints);
    $bp-list: ();
 
    $i: index($bp-keys, $bp-start);
    @while $i <= length($bp-keys) and nth($bp-keys, $i) != $bp-end {
      $i: $i + 1;
      $bp-list: join($bp-list, nth($bp-keys, $i));
    }
 
    @each $key in $bp-list {
      $percentage: ( get-bp($key) - get_bp($bp-start) ) / $bp-distance;
      @include bp($key) {
        #{$property}: round-num( ( $value-distance * $percentage ) + $value-start );
      }
    }
  }
}
.nope {
  @include spread-value(font-size, 1.6em, 2em, medium, medium);
}
.yep {
  font-size: 1.6em;
  @include bp(medium) {
    font-size: 2em;
  }
}